How to hide/show a specific component on react

Question

I have a component that shows a couple Charts and I want to create a button for each of them that shows or hides the charts. I had found how to hide and show but it does't work for me because it hides or show all the Charts, any help will be well received.

By the way I'm totally new to react so my apologies if I don't express myself well.

My code so far:

export default class Home extends Component {
    constructor(props, context) {
        super(props, context);

        this.handleShow = this.handleShow.bind(this);
        this.handleHide = this.handleHide.bind(this);

        this.state = {
            show: false,
            isHidden: true,

        };
    }




    toggle() {
        this.setState({
            isHidden: !this.state.isHidden,
        });
    }




    render() {

        let shown = {
            display: this.state.isHidden  ? "inline-block" : "none"
        };

        let hidden = {
            display: this.state.isHidden ? "none" : "inline-block"
        };

        return (
            <div className="Home">

                <div className="row">
                    <div className="col-md-12">
                        <div className="card">
                            <div className="card-header">
                                <h4 className="card-title">Gráficos</h4>

                                <div className="viewOptions">

                                    <button className="btn bg-info"
                                    ID="prueba">ODC'S
                                    onClick={this.toggle.bind(this)}
                                        <FontAwesome name="eye"/>
                                    </button>
                                    <button 
                                    onClick={this.toggle.bind(this)}
                                    className="btn bg-info">ODI'S  <FontAwesome name="eye"/></button>
                                    <button className="btn bg-info">EGRESOS  <FontAwesome name="eye"/></button>
                                    <button className="btn bg-info">INGRESOS  <FontAwesome name="eye"/></button>
                                    <button className="btn bg-info">ESPACIOS RENTADOS  <FontAwesome name="eye"/></button>
                                </div>
                            </div>



                            {/*ODC'S COLOCADAS*/}

                            <Echart 1
                            style={show} >
                            
                            <Echart 2
                            style ={show}>
                            
                            <Echart ...>

Thank you.

Answer 1

JanneP's logic on comment is right, but if you want to keep the logic on the container, then you would need to have some sort of key or index for each item.

So the button can look something like this:

<button onClick={ () => {
        // keep the state
        let shown = [ ...this.state.shown ];
        // revert the stored boolean to toggle
        shown.chart1 = !shown.chart1
        this.setState({ shown });
    }
} />

And the chart could be:

// If not familiar with the ternary: that is just shorthand if statement
<Chart style={ this.state.shown.chart1 ? { display: 'inline-block' } : { display: 'none' } } />