please help Conditional Operation in javascript (plus react native)

I want to change the items value according to the main_cate value. so I wrote it as nested conditional operation like the code below.
But it doesn’t work. How can I solve them? (Actually, I want to use if operation but in react-native I don’t know how i can write if operation)

export default class URL extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      main_cate: undefined,
      item: undefined,
      sub_cate: undefined,
    };
  }

  render() {
    const placeholder = {
      label: "알림을 등록할 웹사이트를 고르세요.",
      value: null,
      color: "black",
    };

    return (
      <View>       
        <RNPickerSelect
          placeholder={placeholder}
          items={category}
          onValueChange={(value) => {
            this.setState({
              main_cate: value,
            });
          }}
          style={pickerSelectStyles}
          value={this.state.main_cate}
        />

        <RNPickerSelect
          placeholder={placeholder}
           items={
             this.state.main_cate === "portal"   //this part is my question!!
               ? nul
               : "eng"
               ? eng
               : "it"
               ? it
               : "ns"
               ? ns
               : "biz"
               ? biz
               : "human"
               ? human
          }
          onValueChange={(value) => {
            this.setState({
              item: value,
            });
          }}
          style={pickerSelectStyles}
          value={this.state.sub_cate}
        />
      </View>
    );
  }
}

22 thoughts on “please help Conditional Operation in javascript (plus react native)”

  1. You can use if condition before the return

    render () {
       const pickerItems = []
    
      //like this
      if(this.state.main_cate == "portal") {
      // what you to do
      pickerItems =  nul
      } else if (this.state.main_cate == "eng") {
      // what you to do
      }  
    
    return (
    ....
         <RNPickerSelect
              placeholder={placeholder}
               items={pickerItems}
    ....
       )
    }
    

    or you can use multiple conditions

       <RNPickerSelect
        items={this.state.main_cate === "portal"  ? nul : 
        this.state.main_cate === "eng" ? eng :
        this.state.main_cate === "it" ? it: 
        this.state.main_cate === "biz" ? biz:  human}
    
    Reply

Leave a Comment