title: Update State of a Single React Child Component in an Array of Components?
body: <p>So far, I have the expand/collapse all functionality to show/hide the Title components when clicking on the expand/collapse all buttons. </p>
  
  <p>The Container component is the outer most component and maintains the openAll state which passes down to the Text components as a props.</p>
  
  <p>As you can see, in the render method of the Container component, I'm returning a div nested with Button components, and array of titles (which is a div nested with a Toggle and Title components).</p>
  
  <p>My biggest problem is how do I set the state of a single Title component when clicking on the Toggle component? Both the Title and Toggle components are on the same level. I have tried using a callback from the parent (Container component), but it is not working for me.</p>
  
  <p>If you look at the onToggle method inside the Container, I commented out the code because this will show/hide all Title components at once instead a single one...this is because it is in an array.</p>
  
  <p>The Title component has isOpen state, and it is being set by the parent's props (Container component - openAll) when the component receives the next props.</p>
  
  <p>Maybe I overthinking this and making hard than it seems.</p>
  
  <p>Initial App Component:</p>
  
  <pre><code>class App extends React.Component {
    render() {
      return (
        &lt;div&gt;
          &lt;Container text="Text" /&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>Container Component:</p>
  
  <pre><code>class Container extends React.Component {
    constructor() {
      super();
      this.state = {
        openAll: true,
      };
      this.onExpandAll = this.onExpandAll.bind(this);
      this.onToggle = this.onToggle.bind(this);
    }
    render(){
      const titles = [];
      for(let i = 0; i &lt; 3; i++){
        titles.push(
          &lt;div key={i}&gt;
            &lt;Toggle text="Toggle" onToggle={this.onToggle} /&gt;
            &lt;Title
              onToggle={this.onToggle}
              openAll={this.state.openAll}
              text={this.props.text + ' ' + i} /&gt;
          &lt;/div&gt;
        );
      }
      return (
        &lt;div&gt;
          &lt;Button text="Expand All" onExpandAll={() =&gt; this.onExpandAll(true)}  /&gt;
          &lt;Button text="Collapse All" onExpandAll={() =&gt; this.onExpandAll(false)} /&gt;
          {titles}
        &lt;/div&gt;
      );
    }
  
    onToggle() {
      //this.setState({
        //openAll: true
      //});
    }
  
    onExpandAll(isAllOpen) {
      this.setState({
        openAll: isAllOpen
      });
    }
  }
  </code></pre>
  
  <p>Title Component:</p>
  
  <pre><code>class Title extends React.Component {
        constructor() {
          super();
          this.state = {
            isOpen: true
          }
        }
  
        componentWillReceiveProps(nextProps) {
          this.setState({
            isOpen: nextProps.openAll ? true : false
          })
        }
  
        render(){
          return this.state.isOpen ? &lt;h3 style={{display: "inline-block"}}&gt;{this.props.text}&lt;/h3&gt; : null;
        }
      }
  </code></pre>
  
  <p>Toggle Component:</p>
  
  <pre><code>class Toggle extends React.Component {
    render(){
      return &lt;button onClick={this.props.onToggle}&gt;{this.props.text}&lt;/button&gt;
    }
  }
  </code></pre>
  
  <p>Button Component:</p>
  
  <pre><code>class Button extends React.Component {
    render(){
      return &lt;button onClick={this.props.onExpandAll}&gt;{this.props.text}&lt;/button&gt;
    }
  }
  </code></pre>
  
  <p>The HTML would look like this:</p>
  
  <pre><code>Expand All | Collapse All 
  
  Toggle Text 0
  Toggle Text 1
  Toggle Text 2
  </code></pre>
  
  <p>Thanks for any help!</p>