I came across this code snippet:
class Category {
constructor(
readonly _title: string,
) { }
get title() {
return this._title
}
}
const categories = {
get pets() {
const pets = new Category('Pets')
return {
get dishes() {
const dishes = new Category('Dishes')
return dishes
}
}
},
get cloth() {
const cloth = new Category('Cloth')
return {
get accessories() {
const accessories = new Category('Accessories')
return accessories
}
}
}
}
I would like to use it in this manner:
const product = new Product(categories.pets.dishes)While this approach is useful, I need to display it as a tree structure on the frontend:
<ul>
{Object.entries(categories).map(
([slug, category]) => {
return (
<React.Fragment key={slug}>
<li>{category.title}</li> // encountering an issue here
<ul>
{Object.entries(category).map(([s, c]) => {
return <li key={s}>{c.title}</li>
})}
</ul>
</React.Fragment>
)
})}
</ul>
How can I retrieve the name of the parent category? What would be the most effective way to structure and handle this scenario?