Picker synchronized React Native

Question

I have a Json with all the states and cities. I want to do when selecting the state it shows me only the cities related to the state of the selected select. My code prints the cities. with the console.war, but the return is undefined.

Follow the information.

JSON:

{
  "estados": [
    {
      "sigla": "AC",
      "nome": "Acre",
      "cidades": [
        "Acrelândia",
        "Assis Brasil",
        "Brasiléia",
        "Bujari",
      ]
    }, 
    {
      "sigla": "AL",
      "nome": "Alagoas",
      "cidades": [
        "Água Branca",
        "Anadia",
        "Arapiraca",
        "Atalaia",
      ]
    }
  ]
}

Code:

    _getItem = (val) => {

        JSONCidades.estados.map(element => {
            if (val == element.sigla) {
                console.warn(element.cidades)
                return  element.cidades
            }
        })



    }

    _onChageValue = (value) => {
        this.setState({ uf: value })
    }

    _onChageValue2 = (value) => {
         console.warn(value)
    }

                            <Picker
                                selectedValue={this.state.uf}
                                style={{ height: 50, width: 120 }}
                                onValueChange={this._onChageValue.bind(this)}
                            >
                                {
                                    JSONCidades.estados.map((element, index) => {
                                        return <Picker.Item label={element.sigla} value={element.sigla} />
                                    })
}

<Picker
    selectedValue={this.state.cidade}
    style={{ height: 50, width: 120 }}
    onValueChange={this._onChageValue2.bind(this)}
>
    {
        this._getItem(this.state.uf.toString())
    }

</Picker>

Answer 1

Follow the solution I implemented. I separated the Picker from States and Cities. Each in different components.

CITIES

import React from 'react';
import { View, Picker, StyleSheet } from 'react-native';


export default props => (
    <View  >
        {
            props.data ?
                <Picker
                    selectedValue={props.selectedValue}
                    onValueChange={props.onValueChange}
                >
                    {
                        props.data.cidades.map(cidade => <Picker.Item key={cidade} label={cidade} value={cidade} />)
                    }
                </Picker>
                :
                <Picker
                    selectedValue={props.selectedValue}
                    onValueChange={props.onValueChange}
                >
                    <Picker.Item  label={'Selecione'} />
                </Picker>
        }
    </View>
)

STATES

import React, { Component } from 'react'
import {View, Picker } from 'react-native'

export default  props => (
    <View >
        {
            props.data ?
                <Picker
                    selectedValue={props.selectedValue}
                    onValueChange={props.onValueChange}
                >
                    {
                        props.data.map(estado =>
                            <Picker.Item key={estado} label={estado.sigla} value={estado} />)
                    }
                </Picker>
                :
                null
        }
    </View>
)

Then I called them on my screen this way.

import React, { Component } from "react";
import { Picker, View, TextInput, Text, Button } from "react-native";
import { estados } from './cidades-estados/cidades-estados.json'
import SelectEstados from './components/SelectEstados'
import SelectCidades from './components/SelectCidades'

export default class Teste extends Component {

      state = { uf: null, selectedValueEstado: null, selectedValueCidade: null }

      componentDidMount() {
        this.setState({
          uf: estados,
          selectedValueEstado: '',
          selectedValueCidade: ''
        })
      }

      renderValueChangeEstado = (value) => {
        console.warn(value.sigla)
        this.setState({
          selectedValueEstado: value
        })
      }


      renderValueChangeCidade = (value) => {
        console.warn(value)
        this.setState({
          selectedValueCidade: value
        })
      }

      render() {
        const { selectedValueCidade, selectedValueEstado, uf } = this.state;
        return (
          <View>
            <View >
              <SelectEstados
                selectedValue={selectedValueEstado}
                data={uf}
                onValueChange={this.renderValueChangeEstado} />
            </View>
            <View>
              <SelectCidades selectedValue={selectedValueCidade}
                data={selectedValueEstado}
                onValueChange={this.renderValueChangeCidade} />
            </View>
          </View>
        );
      }
    }