如何根据所选的选择器值显示组件？ [反应原生]

Question

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.

I tried this function but not working

pickerOptionText = () => {
  if (this.state.PickerValueHolder==this.state.filter[0]) {
    return (
      <Text>{instructions[2]}</Text>
    );
  }else {
    return (
      <Text>{instructions[1]}</Text>
    );
  }
  return null;
}

here is my 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) => response.json())
          .then((responseJson) => {
            this.setState({
              isLoading: false,
              dataSource: responseJson
            })
          })
          .catch((error) => {
            console.error(error);
          });
      }

  render() {
    const resizeMode = 'stretch';


pickerOptionText = () => {
  if (this.state.PickerValueHolder==this.state.filter[0]) {
    return (
      <Text>{instructions[2]}</Text>
    );
  }else {
    return (
      <Text>{instructions[1]}</Text>
    );
  }
  return null;
}



    return (
      <View style={styles.container}>
        <Image source={require('../../Images/HomeLayout.png')}
          style={styles.imagen}
        />
      <View style={styles.mView}>
        <View style={styles.panel}>
          <Text style={styles.titlePanel}>MODO FACIL</Text>
          <Text style={styles.instructions}>{instructions[0]}</Text>
          <View style={styles.picker}>
          <Picker
            selectedValue={this.state.PickerValueHolder}
            style={ {height: '100%',width: '100%'}}
            mode="dropdown"
            onValueChange={(itemValue, itemIndex) => this.setState({PickerValueHolder: itemValue})} >
            { this.state.filter.map((item, key)=>(
              <Picker.Item label={item.option} value={item.option} key={key} />)
              )}
            </Picker>
          </View>

          <View style={styles.gameOpt}>
            <Text>[dynamic options]</Text>
            {pickerOptionText}
          </View>

        </View>
      </View>
      <TouchableOpacity style={styles.button}><Text style={styles.btnText}>Play!</Text></TouchableOpacity>
      </View>
    );
  }
}

Answer 1

You forgot '()'. pickerOptionText is a function, not a React component.

<Text>[dynamic options]</Text>
{pickerOptionText}

to:

<Text>[dynamic options]</Text>
{pickerOptionText()}

Answer 2

You can try using Conditional Rendering of JSX, by this you can use ternary operator and a simple if condition. this is written as:

{this.state.PickerValueHolder==this.state.filter[0] ? 
<Text>{instructions[2]}</Text>
:<Text>{instructions[1]}</Text>
}

and if you need simple if condition then,

{ condition == true && <Text>your text here</Text>
}