Best way to create expandable menu? - reactjs

Question

What's the best way to create menu like in attached photos ?
I tried to make it with:
const [firstParentActive, setFirstParentActive] = useState(false) // idea is to make useStates for all category parents and category children
const activeHandler = () => {...} // all handlers for setting 'true' in such category parents
<div
className={classes[`FullServices__parent-${active}`]}
onClick={() => activeHandler()}
>
Кузов
</div>
This way seemed to me very uncomfy and not universal. Furthermore I will refactor it all using redux-toolkit
initial state
expanded

Answer 1

There are many ways to use accordion menus
Add following code in src/App.js
import React from 'react';
const App = () => {
const accordionData = {
title: 'Section 1',
content: `Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis sapiente
laborum cupiditate possimus labore, hic temporibus velit dicta earum
suscipit commodi eum enim atque at? Et perspiciatis dolore iure
voluptatem.`
};
const { title, content } = accordionData;
return (
<React.Fragment>
<h1>React Accordion Demo</h1>
<div className="accordion">
<div className="accordion-item">
<div className="accordion-title">
<div>{title}</div>
<div>+</div>
</div>
<div className="accordion-content">{content}</div>
</div>
</div>
</React.Fragment>
);
};
export default App;