title: Map a filtered array in React
body: <p>I made a component containing two dropdown lists. The options in the second dropdown menu is supposed to be filtered depending on the selected option from the first dropdown menu. </p>
  
  <p>Now, I want to map a filtered array that is stored in a const similary to the way i map options1:</p>
  
  <pre><code>render() {
  
  const options1 = [
     {value: 'one', label: 'One'},
     {value: 'two', label: 'Two'}
  ];
  
  
  
  const options2 = [
     {value: 'one-a', label: 'One A', link: 'one'},
     {value: 'one-b', label: 'One B', link: 'one'},
     {value: 'two-a', label: 'Two A', link: 'two'},
     {value: 'two-b', label: 'Two B', link: 'two'}
  ];
  
  const filteredOptions = options2.filter(o =&gt; o.link === this.state.selectedOption.value);
  
  return (
  &lt;div style={style}&gt;
     &lt;div&gt;
        &lt;label&gt;Select one&lt;/label&gt;
        &lt;select 
           value={this.state.selectedOption.value} 
           onChange={this.handleChange1} 
        &gt;
           {options1.map(tag =&gt; &lt;option&gt;{tag.value}&lt;/option&gt;)}
        &lt;/select&gt;
  
     &lt;/div&gt;
     &lt;div&gt;
        &lt;label&gt;Then the other&lt;/label&gt;
        &lt;select
           value={this.state.selectedOption2.value}
           onChange={this.handleChange2}
        &gt;
           {filteredOptions.map(tag =&gt; &lt;option&gt;{tag.value}&lt;/option&gt;)}
        &lt;/select&gt;
  
     &lt;/div&gt;
  &lt;/div&gt;
  )
  }
  </code></pre>
  
  <p>The first mapping of options1 works just fine. However, my select tag gets rendered empty for the mapping of filteredOptions.</p>
  
  <p>I have no idea why it won't work. Anyone happen to have an idea?</p>
  
  <p>Full code: <a href="https://www.codepile.net/pile/evNqergA" rel="nofollow noreferrer">https://www.codepile.net/pile/evNqergA</a></p>