ReactJS: Show/Hide different divs with different IDs using react hooks - reactjs

Question

I have a feature in my project where I have different Icons that will show divs.
Here is my code so far:
const [drawerOpen, setDrawerOpen] = useState(false);
const [click, setClick] = useState(false);
const contextData = {
stateSetters: {
setDrawerOpen
}
};
<Row>
<Col md={8}>
<Card className="project-card">
<div>
<Icon type="down" onClick={() => {
setClick(!click);
contextData.stateSetters.setDrawerOpen(!click);
}}/>
</div>
</Card>
</Col>
<Col md={8}>
<Card className="project-card">
<div>
<Icon type="down" onClick={() => {
setClick(!click);
contextData.stateSetters.setDrawerOpen(!click);
}}/>
</div>
</Card>
</Col>
<Col md={8}>
<Card className="project-card">
<div>
<Icon type="down" onClick={() => {
setClick(!click);
contextData.stateSetters.setDrawerOpen(!click);
}}/>
</div>
</Card>
</Col>
</Row>
<div className={drawerOpen ? 'show-feature-drawer' : 'hide-feature-drawer'}>
<div className="feature-drawer" id="data-1">
</div>
</div>
<div className={drawerOpen ? 'show-feature-drawer' : 'hide-feature-drawer'}>
<div className="feature-drawer" id="data-2">
</div>
</div>
<div className={drawerOpen ? 'show-feature-drawer' : 'hide-feature-drawer'}>
<div className="feature-drawer" id="data-3">
</div>
</div>
I am looking for ways on how to open by calling its div id. I tried tweaking the onClick() but it still opens all the divs at once.

Answer 1

You need to specify the id of the drawer to open instead of the boolean value in state
const [drawerOpen, setDrawerOpen] = useState('');
const handleDrawerOpen = (data) => {
if(data === drawerOpen) {
setDrawerOpen('');
} else {
setDrawerOpen(data);
}
}
const contextData = {
stateSetters: {
setDrawerOpen: handleDrawerOpen
}
};
<Row>
<Col md={8}>
<Card className="project-card">
<div>
<Icon type="down" onClick={() => {
contextData.stateSetters.setDrawerOpen('data-1');
}}/>
</div>
</Card>
</Col>
<Col md={8}>
<Card className="project-card">
<div>
<Icon type="down" onClick={() => {
contextData.stateSetters.setDrawerOpen('data-2');
}}/>
</div>
</Card>
</Col>
<Col md={8}>
<Card className="project-card">
<div>
<Icon type="down" onClick={() => {
contextData.stateSetters.setDrawerOpen('data-3');
}}/>
</div>
</Card>
</Col>
</Row>
<div className={drawerOpen === 'data-1' ? 'show-feature-drawer' : 'hide-feature-drawer'}>
<div className="feature-drawer" id="data-1">
</div>
</div>
<div className={drawerOpen === 'data-2' ? 'show-feature-drawer' : 'hide-feature-drawer'}>
<div className="feature-drawer" id="data-2">
</div>
</div>
<div className={drawerOpen === 'data-3' ? 'show-feature-drawer' : 'hide-feature-drawer'}>
<div className="feature-drawer" id="data-3">
</div>
</div>