Tenho uma requisição que busca os estados
api.get('address/states')
.then(res => {
const states = res.data.data;
this.setState({ states });
})
E outra que busca os dados do endereço pelo CEP e preenche os campos dor formulário:
CheckZipcode() {
let cep = this.state.zipcode.substring(0, 9);
api.post('address/zipcode', { cep })
.then(res => {
const address = res.data.data;
this.setState({ neighborhood: address.bairro });
this.setState({ city: address.cidade });
this.setState({ complement: address.complemento });
this.setState({ street: address.endereco });
this.setState({ uf: address.estado });
this.setState({ id_city: address.id_cidade });
if (address) {
api.get(`address/cities/${this.state.uf}`)
.then(res => {
const cities = res.data.data;
this.setState({ cities });
})
}
})
}
Tenho um select que é preenchido com os dados da primeira requisição. Eu preciso que quando o usuário digitar o CEP o select seja selecionado. Tentei fazer assim:
{this.state.states.map((estado, i) =>
{
if(this.state.uf === estado.uf){
<option selected value={estado.uf} label={estado.estado} key={i} />
} else{
<option value={estado.uf} label={estado.estado} key={i} />
}
}
)}
Mas daí o map não renderiza os dados dos estados. Se eu colocar como abaixo, ele mostra mas não consigo fazer a validação, caso o usuário digitou o CEP:
{this.state.states.map((estado, i) =>
<option value={estado.uf} label={estado.estado} key={i} />
)}
map
semreturn
. No segundo exemplo não precisa dereturn
porque não tem um bloco de{}
.