React Native에서 Picker의 item을 map()로 간결하게 구현하는 방법

하고 싶었던 일

잘못된 예

export default PickerSample = () => {
  const [number, setNumber] = useState(0);
  const numbers = [0, 1, 2, 3, 4, 5];  // <Picker.Item> に表示させたい値の配列

  return (
    <Picker
      style={styles.picker}
      itemStyle={styles.pickerItem}
      selectedValue={number}
      onValueChange={(itemValue) => setNumber(itemValue)}
    >
      {numbers.map((number, index) => {
        return (
          <Picker.Item
            key={index}
            label={number}
            value={index}
          />
         );
      })}
    </Picker>
  )
}

undefined is not an object (evaluating 'child.props.value')

해결 방법

export default PickerSample = () => {
  const [number, setNumber] = useState(0);
  const numbers = [0, 1, 2, 3, 4, 5];  // <Picker.Item> に表示させたい値の配列

  return (
    <Picker
      style={styles.picker}
      itemStyle={styles.pickerItem}
      selectedValue={number}
      onValueChange={(itemValue) => setNumber(itemValue)}
    >
      {numbers.map((number, index) => {
        return (
          <Picker.Item
            key={index}
            label={number.toString()}  // ここに追加
            value={index}
          />
         );
      })}
    </Picker>
  )
}

완제품