0

So, I create this component PickerUF, for selecting Brazil states.

import React, { Component } from "react";
import { StyleSheet, Platform } from "react-native";

import { Picker } from 'native-base'

export default class PickerUF extends Component {
    constructor(props) {
        super(props);
    }

    state = {
        selectedUF: this.props.value
    };

    render() {
        const pickerItems = UFList.map(uf => {
            return (
                <Picker.Item key={uf.sigla} label={uf.sigla} value={uf.sigla} />
            );
        });

        if (Platform.OS === 'android') {
            pickerItems.unshift(<Picker.Item key='select' label="Estado" />)
        }
        return (

            <Picker
                style={[styles.field, this.props.style]}
                iosHeader="Estado"
                mode="dropdown"
                selectedValue={this.props.value}
                onValueChange={(value) => {
                    this.setState({ selectedUF: value });
                }}
            >
                {pickerItems}
            </Picker>
        );
    }
}
const UFList = [
    { sigla: 'AC', estado: 'Acre' }
    , { sigla: 'AL', estado: 'Alagoas' }
    , { sigla: 'AP', estado: 'Amapá' }
    , { sigla: 'AM', estado: 'Amazonas' }
    , { sigla: 'BA', estado: 'Bahia' }
    , { sigla: 'CE', estado: 'Ceará' }
    , { sigla: 'DF', estado: 'Distrito Federal' }
    , { sigla: 'ES', estado: 'Espírito Santo' }
    , { sigla: 'GO', estado: 'Goiás' }
    , { sigla: 'MA', estado: 'Maranhão' }
    , { sigla: 'MT', estado: 'Mato Grosso' }
    , { sigla: 'MS', estado: 'Mato Grosso do Sul' }
    , { sigla: 'MG', estado: 'Minas Gerais' }
    , { sigla: 'PA', estado: 'Pará' }
    , { sigla: 'PB', estado: 'Paraíba' }
    , { sigla: 'PR', estado: 'Paraná' }
    , { sigla: 'PE', estado: 'Pernambuco' }
    , { sigla: 'PI', estado: 'Piauí' }
    , { sigla: 'RJ', estado: 'Rio de Janeiro' }
    , { sigla: 'RN', estado: 'Rio Grande do Norte' }
    , { sigla: 'RS', estado: 'Rio Grande do Sul' }
    , { sigla: 'RO', estado: 'Rondônia' }
    , { sigla: 'RR', estado: 'Roraima' }
    , { sigla: 'SC', estado: 'Santa Catarina' }
    , { sigla: 'SP', estado: 'São Paulo' }
    , { sigla: 'SE', estado: 'Sergipe' }
    , { sigla: 'TO', estado: 'Tocantins' }
]
const styles = StyleSheet.create({
    field: {
        width: '100%'
    }
});

And it's used this way 

<InputZipCode onLoadCEP={(cep) => {
this.setState({
        logradouro: cep.logradouro,
        bairro: cep.bairro,
        cidade: cep.cidade,
        uf: cep.uf,
    });
    this.refs.Numero._root.focus();
}} />
<PickerUF
    value={this.state.uf}
    ref={'UF'} />

In this case, state.uf is automatically loaded by search on zipcode. And it's working fine.

The problem is that I can't manually select the state.

Changing the PickerUF components from selectedValue={this.props.value} to selectedValue={this.state.selectedUF}, I can only select manually.

How can I manage both manually and programatically selection?

lcssanches
  • 995
  • 12
  • 33
  • If I clearly understand you, you are trying to say that the value is being passed as a prop to the component right? In that case, I will suggest you store the value coming from the props in the local state. That way, when the props are received, your component will re-render and it will be updated. – dealwap Apr 17 '18 at 11:23
  • @dealwap Am I not doing this already? `state = { selectedUF: this.props.value };` – lcssanches Apr 17 '18 at 11:26
  • Since you are already setting it in the state, you should access it with `this.state. selectedUF ` – dealwap Apr 17 '18 at 11:31
  • Sorry, i don't get it. You mean that my PickerUF need to have this `selectedValue={this.state.selectedUF}`? – lcssanches Apr 17 '18 at 11:33
  • Yes, when the component renders, the state will be updated and the picker will automatically display the select UF as the default selected item. – dealwap Apr 17 '18 at 11:35
  • I tried to do that. But with PickerUF reading from state, I can only select manually. I mean, when the user enter the zipcode, I run the search and all fields, except PickerUF, are filled. – lcssanches Apr 17 '18 at 11:43
  • Normally, when the state changes then the component should re-render. – dealwap Apr 17 '18 at 12:16
  • When a prop is associated with a state, it automatically recognizes as states changes? Because actually I'm changing the prop valur of PickerUF. – lcssanches Apr 17 '18 at 12:24
  • Probably the code you posted above is incomplete but normally, if you want to automatically select the Picker item when the user inserted their zip code maybe in an input box, you would want to use a method like `onChange` to set the new value to the state then you should set the value in the state and reference this.state.keyName in your picker default selected value. – dealwap Apr 17 '18 at 12:28
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/169170/discussion-between-lcssanches-and-dealwap). – lcssanches Apr 17 '18 at 12:37

1 Answers1

0

I have to pass the component's state to the form's states.

lcssanches
  • 995
  • 12
  • 33