React Native : How to retrieve data from a State with a nested json array and Map that state to get a particular value with a given id

Question

I have a react native picker which has an array of objects that i have fetched from my API and saved to state under properties. This is a screenshot of my data fetched

I need to find the correct object in the array from the _id when I select the Property dropdown. I need this do be done using Javascript logic without making a second call to my server. This is my code inside the render for drop down

 <View style={{margin: 20, flexDirection: 'row', flex: 1}}>
                        {/*PROPERTY....................................................*/}
                        <View style={{padding: '10px'}}>
                            <Picker style={styles.picker} selectedValue={this.state.pickerProperty}
                                    onValueChange={(itemValue, itemIndex) => this.getPropertyById(itemValue)}>
                                <Picker.Item label="Select Property" value=""/>
                                {this.state.properties.map((item, key) => (
                                    <Picker.Item label={item.PropertyName} value={item._id} key={key}/>
                                ))}
                            </Picker>
                            {/*{this.getPropertyById()}*/}
                        </View>
                        {/*TYPE........................................................*/}
                        <View style={{padding: 10}}>
                            <Picker style={styles.picker} selectedValue={this.state.pickerType}
                                    onValueChange={(itemValue, itemIndex) => this.setState({pickerType: itemValue})}>
                                <Picker.Item label="Select Type" value=""/>
                                {this.state.propById.map((item, key) => (
                                    <Picker.Item label={item.tname} value={item.tname} key={key}/>
                                ))}

                            </Picker>
                            <Text>{this.state.pickerType}</Text>
                        </View>
                    </View>

I need to write my code inside this function

 getPropertyById=(itemValue)=> { //Need the code here
}

You can use for loop on `Type` array and find data belong to your `_id`. — Nimesh Bhalani, Mar 20 '20 at 10:22
What is tname? In the screenshot they looks like strings that don't appear in the property objects... you need a value or index you can use to map to values in that properties array — Flagship1442, Mar 20 '20 at 15:53
@James tnames are string values inside the Type array.I need that values in my next dropdown when i select the first dropdown value. i.e the second value depend on the id of first value — Sahan Thilakarathna, Mar 21 '20 at 14:10
@NimeshBhalani can u help me more. I'm beginner in react native — Sahan Thilakarathna, Mar 21 '20 at 14:11
Could you add a fully expanded example of `Type` to the original question, so I can see exactly what's in there? It should be simple enough to find the corresponding property once I can see where that value sits. You mean `tname` is a property name on those objects inside `Type` array? — Flagship1442, Mar 22 '20 at 18:23
@James I found the answer. These kind of drop down are called cascading drop downs.Thanks for your contribution — Sahan Thilakarathna, Mar 23 '20 at 04:03

score 0 · Answer 1 · answered Mar 25 '20 at 19:45

0

this.setState({
  pickerProperty : this.state.properties.find(item => item._id === itemValue)
})

or as a function

getPropertyById(itemValue) {
  this.setState({
    pickerProperty : this.state.properties.find(item => item._id === 
    itemValue)
  })
}

answered Mar 25 '20 at 19:45

Adam Katz

6,999
11
42
74

Thank You I have already found a solution similar to this.Thank You – Sahan Thilakarathna Apr 03 '20 at 04:24

score 0 · Answer 2 · answered Mar 26 '20 at 00:01

0

Try this

const getPropertyById = (propertiesArray, itemValue) => {
     return propertiesArray.find(item => item._id === itemValue)
}

call it this way inside your onValueChange:

this.getPropertyById(this.state.properties, itemValue)

answered Mar 26 '20 at 00:01

Ahmad Khudeish

1,017
13
15

score 0 · Accepted Answer · answered Apr 03 '20 at 04:30

Found this solution and it helped me.

    changeProperty(event) {
    this.setState({selectedProperty: event.target.value});
    this.setState({types: this.state.properties.find(property => property.PropertyName === event.target.value).Type})

}

changeType(event) {
    this.setState({selectedType: event.target.value});
    const Ty = this.state.properties.find(property => property.PropertyName === this.state.selectedProperty).Type;
    this.setState({items: Ty.find(Typ => Typ.typename === event.target.value).Item})

}

Using each of these in onChange={} of each dropdown will solve the problem. Do not forget to modify your constructor as follows

   constructor(props) {
    super(props);
    this.changeProperty = this.changeProperty.bind(this);
    this.changeType = this.changeType.bind(this);

}

React Native : How to retrieve data from a State with a nested json array and Map that state to get a particular value with a given id

3 Answers3