title: How to change state of a sibiling, if I click on a component?
body: <p>I have three components that render a list of available timeslots.</p>
  
  <p>If I click on a timeslot on the list of component1, it gets selected, now, If a sibiling component, let's call it component2, also has a timeslot that matches the one that had been clicked on component1, I want the one in component2 to be greyed out.</p>
  
  <p>How can I do this?</p>
  
  <p>The components that render the lists of available timeslots are called CompanyPanel:</p>
  
  <pre><code>export default class CompanyPanel extends React.Component {
    constructor(props) {
      super(props)
  
      this.state = {
        selectedTime: 'None',
        times: this.props.times,
      }
  
      this.chooseTime = this.chooseTime.bind(this)
      this.deleteTime = this.deleteTime.bind(this)
  
    }
  
    componentDidMount () {
      this.chooseTime(this.state.selectedTime)
    }
  
    deleteTime (time) {
      this.setState( ({times}) =&gt; ({
        times: [...this.state.times].filter( t =&gt; t !== time),
      }))    
    }
  
    chooseTime (selectedTime) {
      this.setState({
        selectedTime,
      })
    }
  
    render() {
      const { selectedTime, times } = this.state
  
      return (
        &lt;React.Fragment&gt;
          &lt;div className="flex-auto pa3"&gt;
            &lt;div className="ba mv2"&gt;
              &lt;p className="tc pa2 dib bg-near-white"&gt;{this.props.name}&lt;/p&gt;
            &lt;/div&gt;
            &lt;div className="ba mv2"&gt;
              &lt;p className="tc pa2 dib bg-red white"&gt;{selectedTime}&lt;/p&gt;
            &lt;/div&gt;
            &lt;div className="ba mv2"&gt;
              {times.map((time, i) =&gt; (
                &lt;div key={i} className="bg-green"&gt;
                  &lt;span className="pa2 red pointer ma2 bg-white" onClick={() =&gt; this.deleteTime(time)}&gt;X&lt;/span&gt;
                  &lt;p onClick={() =&gt; this.chooseTime(time.dateUTCString)} className="tc pa2 dib bg-yellow"&gt;{time.dateUTCString}&lt;/p&gt;
                &lt;/div&gt;
              ))}
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/React.Fragment&gt;
      )
    }
  }
  </code></pre>
  
  <p>And those CompanyPanel components are being wrapper by a parent component called CompaniesDashboard:</p>
  
  <pre><code>export default class CompaniesDashboard extends React.Component {
    constructor(props) {
      super(props)
  
      this.state = {
        error: null,
        data,
      }
  
      this.isLoading = this.isLoading.bind(this)
    }
  
    isLoading() {
      return this.state.posts === null &amp;&amp; this.state.error === null
    }
  
    render() {
      const { data, error } = this.state
  
      return (
        &lt;React.Fragment&gt;
          {this.isLoading() &amp;&amp; &lt;p&gt;LOADING&lt;/p&gt;}
          {error &amp;&amp; &lt;p&gt;{error}&lt;/p&gt;}
  
          &lt;div className="flex"&gt;
            {data &amp;&amp; data.map((company, i) =&gt; (
              &lt;CompanyPanel key={i} times={company.times} name={company.name} /&gt;
            ))}
          &lt;/div&gt;
        &lt;/React.Fragment&gt;
      )
    }
  }
  </code></pre>
  
  <p>I think i need to somehow to set a state in the parent, when the <code>chooseTime</code> method is clicked inside if the CompanyPanel component. But not sure how to do it.</p>