3
respostas

Como setar a seleção de um option em um modal?[Bootstrap]

Tenho um formulário onde tem um select de opções após selecionar o item dessa select e clicar em um botão de editar abre um modal onde aparece os mesmos dados porém para edição, e preciso que o seletor mostre o item que foi escolhido no formulário. Tentei com defaultValue e não funcionou.

 <Form.Group controlid="Formulario">
                                        <Form.Label>Formulario</Form.Label>
                                        <Form.Control as="select" 
                                            defaultValue={this.props.Cliente} >
                                            {this.state.nome.map(nomes =>
                                                <option key={nomes.IdNome}>{nomes.nomeCliente}
                                                </option>
                                            )}
                                        </Form.Control>
                                    </Form.Group>                                           
3 respostas

Fala ai Francisco, tudo bem? Nesse caso você pode usar o value.

Ele vai fazer o bind do valor passado para o value e selecionar a option que possui aquele value.

Outro detalhe, no seu option você também precisa informar o value, além do key.

Espero ter ajudado.

Estou puxando os dados de um banco

                            {this.state.nome.map(nomes =>
                                                <option key={nomes.IdNome}>{nomes.nomeCliente}
                                                </option>

como posso adicionar esse value dentro do option

Nesse caso você pode fazer algo assim:

{this.state.nome.map(nomes =>
    <option key={nomes.IdNome} value={nomes.IdNome}>{nomes.nomeCliente}</option>
)}

Lembrando que o value do option tem que bater com o valor salvo no banco de dados para que o React consiga deixá-lo como selecionado.

No seu select você deve informar o value que veio do banco de dados, ai ele vai casar o value do select com algum value dos option's.

Espero ter ajudado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software