Picker does not manually select

Question

I have this Pickeruf component, which displays the list of 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%'
    }
});

This component is used this way

<PickerUF
    value={this.state.uf}
    ref={'UF'} />

In this case, state.uf is automatically loaded when I search for the zip code. This is working very well.

The problem is that I cannot change the selected state.

Making the change in Pickeruf’s selectedValue={this.props.value} for selectedValue={this.state.selectedUF} I can only select manually.

What I need to change in order to make the selection manually or automatically?

Answer 1

Do the following: Pass a function called onValueChange in the <PickerUF value={this.state.uf} ref={'UF'} onValueChange={this.onValueChange} />. In this function you will receive the value and will change the this.state.uf.

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

In Commander Pickeruf, you change the onValueChange for onValueChange={this.props.onValueChange}.

You do not need to pass the responsibility to the child Component, it remains just a Component that displays and you move up a level to handle the changes.

I hope it helps you!