Picker synchronized React Native

Asked

Viewed 1,906 times

2

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>
javascript react react-native

  • Friend your function is correct, it gives the warn with the cities and then printa Undefined, if you switch to the console.log() may further clarify the answer. But its function is ok. After it prints the values it always prints a Undefined.

1 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>
        );
      }
    }

Browser other questions tagged javascript react react-native

You are not signed in. Login or sign up in order to post.