react native 2 dropdown depend on first one

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>