please help Conditional Operation in javascript (plus react native)

February 19, 2021 by admin

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)”

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}