Render Picker Items from React-Native picker to populate drop-menu selections

Question

I am successfully using the react-native picker to render a drop-menu in one of my components. Right now, in the picker code I am hardcoding the values used to populate the drop-menu items. What I'd ideally like to do is pass these in as props, and have them dynamically generate as many items as necessary within the picker. I'm not sure how to do that, though. I tried using a for-loop but I can't run that kind of conditional logic within the component code itself. This is what it looks like with hard coded values.

export const DropDownMenu = (props) => {
  const [selectedValue, setSelectedValue] = useState(null);
  return (
    <View style={styles.container}>
      <Picker
        selectedValue={selectedValue}
        style={{ height: 50, width: 150 }}
        onValueChange={(itemValue, itemIndex) => {
          props.onSelectMenuValue(itemValue), 
          setSelectedValue(itemValue)
        }}
      >
        <Picker.Item label="A" value="a" />
        <Picker.Item label="B" value="b" />
        <Picker.Item label="C" value="c" />
      </Picker>
    </View>
  );
}

How could I render Picker.Item values based on the props passed in?

Answer 1

You can pass an options prop as an array of objects with a label and a value property and use map like this:

<Picker /*whatever you need for picker here*/>
{props.options.map(option => <Picker.Item label={option.label} value={option.value}/>)}
</Picker>