0

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} />
)}

1
  • 1
    No exemplo que não funciona você está usando map sem return. No segundo exemplo não precisa de return porque não tem um bloco de {}.
    – Isac
    Commented 5/06/2019 às 22:41

1 Resposta 1

1
    if(this.state.uf === estado.uf){
        **return** <option selected value={estado.uf} label={estado.estado} key={i} />
    } else{
        **return** <option value={estado.uf} label={estado.estado} key={i} />
    }

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .