How to style dynamically added nested elements in react - css

Question

I was dynamically adding nested categories and subacatogories in react. I want to hide and show the sub-categories on clicking or hovering main-category. I wanted to show/hide subcatogories(mobiles, tv, laptops) on clicking Accessories and wanna show/hide Noodles on clicking groceries. Please help
My Code:
import React from "react";
function App(props) {
const categoriesList = [
{
id: "1",
name: "Accessories",
slug: "accessories",
children: [
{
id: "2",
name: "Mobiles",
slug: "mobiles",
},
{
id: "3",
name: "TV",
slug: "tv",
},
{
id: "4",
name: "Laptops",
slug: "laptops",
children: [
{
id: 5,
name: "Dell",
slug: "dell",
},
],
},
],
},
{
id: "6",
name: "Books",
slug: "books",
// children: undefined,
},
{
id: "7",
name: "Groceries",
slug: "groceries",
children: [
{
id: "8",
name: "Noodles",
slug: "noodles",
},
],
},
];
const renderCategories = (categories) => {
let myCategories = [];
for (const category of categories) {
myCategories.push(
<li className="category-list" key={category.name}>
{category.name}
{category?.children?.length > 0 ? (
<ul className="nested-category">
{renderCategories(category.children)}
</ul>
) : null}
</li>
);
}
return myCategories;
};
return (
<div className="app">
<ul className="main">{renderCategories(categoriesList)}</ul>
</div>
);
}

Answer 1

You need a state like categoryToBeDisplayed and then just have an onClick on the category li tag
for (const category of categories) {
myCategories.push(
<li className="category-list" key={category.name} onClick={() => setCategory(category.name)}>
{category.name}
{category?.children?.length > 0 && categoryToBeDisplayed === category.name ? (
<ul className="nested-category">
{renderCategories(category.children)}
</ul>
) : null}
</li>
);
}
And if you want multiple to be open at once just have the state accept an array and check if categoryToBeDisplayed.includes(category.name)