show Picker item when value is true React Native

Question

I have a component which use Picker from 'react-native' and in props I am receiving bool value showDefaultPickerItem to show or hide the Picker.Item. The problem is that doing this way doesn´t work, I receive the error

null is not an object evaluating child props

For sure the list has length grater than 1.

function PickerComponent(props){
  const { selectedValue, onValueChange, list, label, valuekey, showDefaultPickerItem } = props;
  return (
    <Picker
      selectedValue={selectedValue}
      onValueChange={(value) => onValueChange(value)}
    >
      {showDefaultPickerItem &&
        <Picker.Item label={"Select"} value={undefined} color ={gray}/>    
      }
      {list.map(l => {
          return <Picker.Item key={l[valuekey]} label={l[label]} value={l[valuekey]} />
        })
      }
    </Picker>              
  )
}

Answer 1

I think this code is helpful to you.

function make_list(list, showDefaultPickerItem, valuekey, label) {
  let listMap = list.map(l => <Picker.Item key={l[valuekey]} label={l[label]} value={l[valuekey]} />);
  if (showDefaultPickerItem) {
    listMap.unshift(<Picker.Item key="_default" label={"Select"} value={undefined} color={'gray'} />);
  }
  return listMap;
}
function PickerComponent(props){
  const { selectedValue, onValueChange, list, label, valuekey, showDefaultPickerItem } = props;
  return (
    <Picker
      selectedValue={selectedValue}
      onValueChange={(value) => onValueChange(value)}
    >
      {make_list(list, showDefaultPickerItem, valuekey, label)}
    </Picker>              
  )
}