<div id="root"></div>

const state = [
  {
    id: 1,
    name: "Фрукты",
    subcategory: [
      { id: 1, name: "Апельсины" },
      { id: 2, name: "Бананы" }
    ]
  },
  {
    id: 2,
    name: "Овощи",
    subcategory: [{ id: 1, name: "Картошка" }]
  },
  {
    id: 3,
    name: "Напитки",
    subcategory: [{ id: 1, name: "Кока-кола" }]
  }
];

function listSubcategory(list) {
  return `<li key={list.id}>${list.name}</li>`;
}

function listCategory(list) {
  return `<li key={list.id}>${list.name}
    <ul>${list.subcategory.map((v) => listSubcategory(v)).join("")}</ul>
  </li>`;
}

function category() {
  return `<ul>
  ${state.map((v) => listCategory(v)).join("")}
  </ul>`;
}

function render(node) {
  const root = document.getElementById("root");
  root.innerHTML = node;
}

render(category());