Conditional Rendering on Items of Native Base Picker [React Native]

Question

I’m using ‘Native Base’ components for our product and going good with this, but I’m stuck at one point and it is around putting Items in Nativebase Picker. My code is like this

Render Method code -

render(){

  return (

      <View style={{marginTop: 20,  flexDirection:'row', flexWrap:'wrap', justifyContent:'space-around', alignItems:'center'}}>

        <View style={{flex:1, justifyContent:'center', alignItems:'flex-end' }}>
          <Button
             style={{ backgroundColor: '#6FAF98', }}
             onPress={this._showDateTimePicker}

             >
             <Text>Select Date</Text>
          </Button>
        </View>

        <View style={{flex:1, justifyContent:'center', alignItems:'stretch'}}>
          <Picker
              style={{borderWidth: 1, borderColor: '#2ac', alignSelf:'stretch'}}
              supportedOrientations={['portrait','landscape']}
              iosHeader="Select one"
              mode="dropdown"
              selectedValue={this.state.leaveType}
              onValueChange={(value)=>this.setState({leaveType:value,})
                //this.onValueChange.bind(this)
              }>

              <Item label="Full Day" value="leave1" />
              {
                this.showStartDateFirstHalf() // Here I want to show this picker item on the basis of a condition 
              }
              <Item label="2nd half" value="leave3" />
         </Picker>
        </View>
        <DateTimePicker

          isVisible={this.state.isStartDatePickerPickerVisible}
          onConfirm={this._handleDatePicked}
          onCancel={this._hideDateTimePicker}
          mode='date'
        />

      </View>



    );


}

showStartDateFirstHalf()
{
    if(!this.state.isMultipleDays)
    {
      return(
          <Item label="1st Half" value="leave2" />
      );
    }
}

So, this code is working fine if this.state.isMultipleDays is false, But when this.state.isMultipleDays is true, it means when it is in else part then i'm getting this error -

Cannot read property 'props' of undefined

Answer 1

I think there's an easier answer to this. Instead of creating the separate showStartDateFirstHalf() function try this:

render() {

  const pickerItems = [
    {
      label: 'Full Day',
      value: 'leave1',
    },
    {
      label: '1st Half',
      value: 'leave2',
    },
    {
      label: '2nd Half',
      value: 'leave3',
    },
  ];

  const filteredItems = pickerItems.filter(item => {
    if (item.value === 'leave2' && this.state.isMultipleDays) {
      return false;
    }
    return true;
  });

  // The 'return' statement of your render function
  return (
    ...
    <Picker ...>
      {(() => 
        filteredItems.map(item => 
          <Item label={item.label} value={item.value} />
      )()}
    </Picker>
    ...
  );
}

That way, you already have a list of items that is determined before the return statement of the render cycle. Also the use of filter instead of map will not just give you null as the second item if the condition is not met, but will remove the item altogether.