How to store js object inside picker level and value of react native?

Question

{
  1: "4 feet",
  2: "4 feet 1 inches",
  3: "4 feet 2 inches",
  4: "4 feet 3 inches",
  5: "4 feet 4 inches",
  6: "4 feet 5 inches",
  7: "4 feet 6 inches",
  8: "4 feet 7 inches",
  9: "4 feet 8 inches",
  10: "4 feet 9 inches",
  11: "4 feet 10 inches",
  12: "4 feet 11 inches",
  13: "5 feet",
  14: "5 feet 1 inches",
  15: "5 feet 2 inches",
  16: "5 feet 3 inches",
  17: "5 feet 4 inches",
  18: "5 feet 5 inches",
  19: "5 feet 6 inches",
  20: "5 feet 7 inches",
  21: "5 feet 8 inches",
  22: "5 feet 9 inches",
  23: "5 feet 10 inches",
  24: "5 feet 11 inches",
  25: "6 feet ",
  26: "6 feet  1 inches",
  27: "6 feet  2 inches",
  28: "6 feet  3 inches",
  29: "6 feet  4 inches",
  30: "6 feet  5 inches",
  31: "6 feet  6 inches",
  32: "6 feet  7 inches",
  33: "6 feet  8 inches",
  34: "6 feet  9 inches",
  35: "6 feet  10 inches",
  36: "6 feet  11 inches",
  37: "7 feet  "
}

It is js object I want to store of this value inside react native picker.

<Picker
    selectedValue = { this.state.result }
    style = {{ height: 26, width: 70, color: "black" }}
    onValueChange = {(itemValue, itemIndex) => this.setState({ gen: itemValue })}
>
    { this.state.arr && this.state.arr.map(value => (<Picker.Item label={value} value={value} />)) } 
</Picker >

I tried both way this object convert into array or simple object using this code when I run then application automatically closed and error is showing picker value expected a string, not array. Please give some idea how to store this value dynamically in picker.

Answer 1

You first need to convert your object to an array. Using object.entries will convert your object to an iterable array and send each keys and values one by one :

{this.state.arr && Object.entries(this.state.arr).map(([key, value]) => (<Picker.Item label={value} value={key} key={key} />)) }

Do not forget about putting a key prop to your components when mapping them