CODEWITHSUNDEEP
javascriptreactjsreact-nativetypeerror
Syyam Noor
Syyam Noor

Reputation: 504

Type Error: undefined is not and object, error comes while mapping the data from JSON

I am first filtering my data coming from API and then storing it in a const. I am trying to map that object stored in the constant but I am facing this errorenter image description here My Code is: 

secondPicker = () => {
    if (this.state.PickerValueHolder === 'Punjab') {
        const space = this.state.myData.filter(x => x.label === 'Punjab');
        console.log(space.children);
        return (<Picker
                style={styles.dropDown}
                label="Select City"
                onValueChange={(itemValue, itemIndex) => this.setState({ PickerValueHolderCity: itemValue })}
                selectedValue={this.state.PickerValueHolderCity}
            >
                {space.children.map((item, key) => (
                    <Picker.Item label={item.label} value={item.value} key={key} />)
                )}
            </Picker>
        )
    }
    else{return} 
}

when I console log 'space' I get the following data: enter image description here

And the API I am getting my data from is: https://retailsolution.pk/api/countrywise

Upvotes: 1

Views: 51

Answers (1)

Tholle
Tholle

Reputation: 112807

You are filtering out all elements in the array that has a label Punjab into a new array. If you want to use this approach, you must access the first element in this new array and map over the children array in that object.

space[0].children.map((item, key) => ( /* ... */ ))

You could alternatively use find so that you get the desired object in your space variable instead of an array.

secondPicker = () => {
  if (this.state.PickerValueHolder === "Punjab") {
    const space = this.state.myData.find(x => x.label === "Punjab");

    return (
      <Picker
        style={styles.dropDown}
        label="Select City"
        onValueChange={(itemValue, itemIndex) =>
          this.setState({ PickerValueHolderCity: itemValue })
        }
        selectedValue={this.state.PickerValueHolderCity}
      >
        {space.children.map((item, key) => (
          <Picker.Item label={item.label} value={item.value} key={key} />
        ))}
      </Picker>
    );
  } else {
    return null;
  }
};

Upvotes: 1

Related Questions