title: React Pattern for Sequentially updating A series of data dependent components
body: <p>I have 4 components they are dropdowns, when a value is selected from one this loads the data for the second and so on ...</p>
  
  <p>I have something working by doing something like ... (note omitted rest of code for brevity)</p>
  
  <pre><code>render() {
      let dropdown1 = this.state.dropdown1.map(drop1 =&gt; {
          return (
                  &lt;option key={drop1.id} value = {drop1.id}&gt;{drop1.name}&lt;/option&gt;
          )
      })
      return (
          &lt;div&gt;
              &lt;select value={this.state.value} onChange={this.handleChange}&gt;{dropdown1}&lt;/select&gt;
              {this.state.value ? &lt;Dropdown2 id={this.state.value} /&gt; : null}
          &lt;/div&gt;
      )
  </code></pre>
  
  <p>So Dropdown1 renders itself and conditionally the following dropdown and so on ... Whilst this method works, in that updating Dropdown1 will update Dropdown2 - the changes won't propagate beyond the next component. </p>
  
  <p>Is there a better pattern to use to update a hierarchy of components ?</p>