___ ___ erkimt Picker synchronized React Native ______ qstntxt ___

I have a JSON with all states and cities. I want to make when selecting the state it shows me only the cities regarding the state already selected select. My code prints the cities. with %code% , but the return is %code% .

The following information.

JSON

%pre%

Code:

%pre%

%pre%     
______ azszpr301442 ___

Here's the solution I've implemented. I separated the Picker from States and Cities. Each one in different components.

CITIES

%pre%

STATES

%pre%

Then I called them on my screen this way.

%pre%     
___

Navigation
1

I have a JSON with all states and cities. I want to make when selecting the state it shows me only the cities regarding the state already selected select. My code prints the cities. with console.war , but the return is undefined .

The following 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>
    
asked by anonymous 20.05.2018 / 18:27

1 answer

1

Here's the solution I've implemented. I separated the Picker from States and Cities. Each one 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>
        );
      }
    }
    
24.05.2018 / 02:19
How to give setTimeout in form submit? If there is such a Sort a list of students by name in alphabetical order