react native 2 dropdown depend on first one - json

Question

I am trying to connect two dropdown with in react native,
same as country and city
if i select any country it should load cities from that country to second drop-down
all data is in a external json file
but nothing is loading in both drop down (picker)
json file :
{
"interest": [
{
"RAW_MATERIAL":["abc","cde"]
},
{
"OEM_PARTS":["xyz","qwer"]
},
{
"CONSUMABLES":["poiu","fjgl"]
},
{
"SERVICE":["xvcbv","qweiw"]
}
],
}
react native picker i use:
import React, { Component } from 'react';
import { Container,Picker,Button } from 'native-base';
const cData = require('../data.json');
export default class Vendorsupplies extends Component {
constructor(props) {
super(props);
this.state = {
interest:'',
interest2:''
};
}
interest(value: string) {
this.setState({
interest: value
});
}
interest2(value: string) {
this.setState({
interest2: value
});
}
<Picker
note
mode="dropdown"
style={{ width: 120 }}
selectedValue={this.state.interest}
onValueChange={this.interest.bind(this)}
name="intre"
>
{cData.interest.map((number) =>
<Picker.Item label={number.interest_in} value={number.interest_in} />
)}
</Picker>
<Picker
note
mode="dropdown"
style={{ width: 120 }}
selectedValue={this.state.intre2.interest}
onValueChange={this.intre2.interest.bind(this)}
name="intre2"
>
{cData.interest.map((number) =>
<Picker.Item label={number.intre2.interest_in} value={number.intre2.interest_in} />
)}
</Picker>

Answer 1

You can try it like that, I just done it with select but you will get the idea.
const cData = {
interest: [
{
RAW_MATERIAL: ['abc', 'cde'],
},
{
OEM_PARTS: ['xyz', 'qwer'],
},
{
CONSUMABLES: ['poiu', 'fjgl'],
},
{
SERVICE: ['xvcbv', 'qweiw'],
},
],
};
class TodoApp extends React.Component {
constructor(props) {
super(props);
this.state = {
interest: 'RAW_MATERIAL',
interest2: '',
};
}
renderOption() {
const el = cData.interest.find(
interest => Object.keys(interest)[0] === this.state.interest
);
if (el) {
return el[this.state.interest].map(option => (
<option value={option}>{option}</option>
));
}
return <option>empty</option>;
}
render() {
return (
<React.Fragment>
<select
value={this.state.interest}
onChange={e => {
e.persist();
this.setState(prev => ({
...prev,
interest: e.target.value,
}));
}}
>
{cData.interest.map(el => (
<option value={Object.keys(el)}>{Object.keys(el)}</option>
))}
</select>
<select
value={this.state.interest2}
onChange={e => {
e.persist();
this.setState(prev => ({ ...prev, interest2: e.target.value }));
}}
>
{this.renderOption()}
</select>
</React.Fragment>
);
}
}
ReactDOM.render(<TodoApp />, document.querySelector("#app"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>