title: How to show/ hide components in react by clicking sibling component
body: <p>I have a parent component "app.js" that contains child components such as header &amp; chart.
  The chart component has two child components (chart1 &amp; chart2)
  On header, I have 2 clickable links named (chart1, chart2) respectively. My goal is to show/hide each chart by clicking on the header links "chart1 &amp; chart2".
  As I understood, I need to create two states; isHiddenChart1 and isHiddenChart2 in the parent and pass them to header and chart components. Also, I need to create two functions; toggleHideChart1 &amp; toggleHideChart2 that change the states each time I click on the links, and pass these functions to Header component.
  However, I tried to do that but when clicking on the links in header nothing changes!</p>
  
  <p>Following is app.js code</p>
  
  <pre><code>export default class App extends Component {
    constructor (props) {
      super(props)
      this.state = {
        isHiddenChart1: false,
        isHiddenChart2: true
      }
      this.toggleHiddenChart1 = this.toggleHiddenChart1.bind(this)
      this.toggleHiddenChart2 = this.toggleHiddenChart2.bind(this)
    }
    toggleHiddenChart1 () {
      this.setState({
        isHiddenChart1: !this.state.isHiddenChart1
      })
    }
    toggleHiddenChart2 () {
      this.setState({
        isHiddenChart2: !this.state.isHiddenChart2
      })
    }
  render(){
    return (
      &lt;React.Fragment&gt;
        &lt;Header 
                isHiddenChart1={this.state.isHiddenChart1}
                isHiddenChart2={this.state.isHiddenChart2}
                onClick={() =&gt; this.isHiddenChart1}
                onClick={() =&gt; this.isHiddenChart2}
  
  
        /&gt;
       &lt;Chart 
              isHiddenChart1={this.state.isHiddenChart1}
              isHiddenChart2={this.state.isHiddenChart2}
  
       /&gt;
  &lt;/React.Fragment&gt;
  
  
    );
  }
  }
  </code></pre>
  
  <p>header.js</p>
  
  <pre><code>&lt;Link to="#" onClick={()  =&gt; this.props.toggleHiddenChart1}&gt; Chart1 &lt;/Link&gt;
  &lt;Link to="#" onClick={()  =&gt; this.props.toggleHiddenChart2}&gt; Chart2 &lt;/Link&gt;
  </code></pre>
  
  <p>Chart.js</p>
  
  <pre><code>{!this.props.isHiddenChart1 &amp;&amp; &lt;Chart1 /&gt;}
  {!this.props.isHiddenChart2 &amp;&amp; &lt;Chart2 /&gt;}
  </code></pre>
  
  <p>I am not sure if this is the right way to pass states and functions in react, but chart1 is displayed at the beginning and chart2 is hidden so passing states is working fine as I assume!</p>