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 by zip code. This is working very well.
The problem is that I can not change the selected state.
Making the change in PickerUF from selectedValue={this.props.value}
to selectedValue={this.state.selectedUF}
I can only select manually.
What do I need to change to be able to make the selection manually or automatically?