title: how to show a component depending of picker value selected? [React native]
body: <p>I'm trying to make a game with react native and I want to show a different options when i change the picker value.
  basically when I select the first option on the picker a component has to appear and when I select the second one another component.</p>
  
  <p>I tried this function but not working </p>
  
  <pre><code>pickerOptionText = () =&gt; {
    if (this.state.PickerValueHolder==this.state.filter[0]) {
      return (
        &lt;Text&gt;{instructions[2]}&lt;/Text&gt;
      );
    }else {
      return (
        &lt;Text&gt;{instructions[1]}&lt;/Text&gt;
      );
    }
    return null;
  }
  </code></pre>
  
  <h1>here is my code</h1>
  
  <pre><code>export default class Facil extends Component {
  
     constructor(props)
     {
       super(props);
       this.state = {
       isLoading: true,
       PickerValueHolder : '',
       filter: [
         {
           "option":"Palabras por categoria"
         },
         {
           "option":"Palabras por caracteres"
         }
       ],
       dataSource:[]
      }
     }
     componentDidMount() {
  
          return fetch(API_URL)
            .then((response) =&gt; response.json())
            .then((responseJson) =&gt; {
              this.setState({
                isLoading: false,
                dataSource: responseJson
              })
            })
            .catch((error) =&gt; {
              console.error(error);
            });
        }
  
    render() {
      const resizeMode = 'stretch';
  
  
  pickerOptionText = () =&gt; {
    if (this.state.PickerValueHolder==this.state.filter[0]) {
      return (
        &lt;Text&gt;{instructions[2]}&lt;/Text&gt;
      );
    }else {
      return (
        &lt;Text&gt;{instructions[1]}&lt;/Text&gt;
      );
    }
    return null;
  }
  
  
  
      return (
        &lt;View style={styles.container}&gt;
          &lt;Image source={require('../../Images/HomeLayout.png')}
            style={styles.imagen}
          /&gt;
        &lt;View style={styles.mView}&gt;
          &lt;View style={styles.panel}&gt;
            &lt;Text style={styles.titlePanel}&gt;MODO FACIL&lt;/Text&gt;
            &lt;Text style={styles.instructions}&gt;{instructions[0]}&lt;/Text&gt;
            &lt;View style={styles.picker}&gt;
            &lt;Picker
              selectedValue={this.state.PickerValueHolder}
              style={ {height: '100%',width: '100%'}}
              mode="dropdown"
              onValueChange={(itemValue, itemIndex) =&gt; this.setState({PickerValueHolder: itemValue})} &gt;
              { this.state.filter.map((item, key)=&gt;(
                &lt;Picker.Item label={item.option} value={item.option} key={key} /&gt;)
                )}
              &lt;/Picker&gt;
            &lt;/View&gt;
  
            &lt;View style={styles.gameOpt}&gt;
              &lt;Text&gt;[dynamic options]&lt;/Text&gt;
              {pickerOptionText}
            &lt;/View&gt;
  
          &lt;/View&gt;
        &lt;/View&gt;
        &lt;TouchableOpacity style={styles.button}&gt;&lt;Text style={styles.btnText}&gt;Play!&lt;/Text&gt;&lt;/TouchableOpacity&gt;
        &lt;/View&gt;
      );
    }
  }
  </code></pre>