Close sidebar with react in combination with react-state - css

Question

i have written a static sidebar which every icon opens a "sub-sidebar" onclick. i handle the switches between the differrent "sub-sidebars" with react-states.
but i didn´t get to manage that the sub-sidebar closes when a icon is clicked a second time. Anyone an idea how to do this? Thanks in advance.
import React, { Component } from 'react';
import { GrAdd, BsCollection, IoSettingsOutline } from '../icons';
import New from './sidebars/new';
import Collection from './sidebars/collection';
import Settings from './sidebars/settings';
import '../css/StaticBar.css'
class StaticBar extends Component {
constructor(props) {
super(props)
this.state = {
selected: 0,
}
}
render() {
return (
<div className="StaticBar">
<ul>
<li className="ListItem" onClick={() => this.setState({ selected: 0 })}>
<GrAdd color="white"/>
</li>
<li className="ListItem" onClick={() => this.setState({ selected: 1 })}>
<BsCollection color="white" />
</li>
<li className="ListItem" onClick={() => this.setState({ selected: 2 })}>
<IoSettingsOutline color="white" />
</li>
</ul>
{(this.state.selected === 0) && <New />}
{(this.state.selected === 1) && <Collection />}
{(this.state.selected === 2) && <Settings />}
</div>
);
}
}
export default StaticBar;

Answer 1

You can use this conditional setState logic
import React, { Component } from 'react';
import { GrAdd, BsCollection, IoSettingsOutline } from '../icons';
import New from './sidebars/new';
import Collection from './sidebars/collection';
import Settings from './sidebars/settings';
import '../css/StaticBar.css'
class StaticBar extends Component {
constructor(props) {
super(props)
this.state = {
selected: 0,
}
}
render() {
return (
<div className="StaticBar">
<ul>
<li className="ListItem" onClick={() => this.setState({ selected: 0 })}>
<GrAdd color="white"/>
</li>
<li className="ListItem" onClick={() => this.setState({ selected: (this.state.selected==1 ? 0 : 1) })}>
<BsCollection color="white" />
</li>
<li className="ListItem" onClick={() => this.setState({ selected: ( this.state.selected==2 ? 0 : 2) })}>
<IoSettingsOutline color="white" />
</li>
</ul>
{(this.state.selected === 0) && <New />}
{(this.state.selected === 1) && <Collection />}
{(this.state.selected === 2) && <Settings />}
</div>
);
}
}
export default StaticBar;