Neste artigo você aprenderá a como deixar uma option selecionada no React JS, uma ação muito comum nos projetos web!

option selecionada no React JS capa

Fala programador(a), beleza? Bora aprender mais sobre React!

O controle de formulários é um aspecto essencial em muitas aplicações web.

Neste artigo, vamos explorar uma questão comum enfrentada por muitos desenvolvedores React: como deixar uma opção selecionada por padrão em um elemento select?

Se você está familiarizado com HTML, você pode se perguntar: “não posso apenas adicionar o atributo selected a uma opção?”

No React, no entanto, as coisas funcionam um pouco diferente. Vamos discutir o porquê e como lidar com isso.

O Elemento Select no React

Em HTML padrão, o atributo ‘selected’ é usado para definir a opção padrão em um elemento select. No React, no entanto, o valor do select é controlado pelo estado do componente.

Isso significa que o valor selecionado deve ser definido no estado do componente e depois vinculado ao elemento select.

Assim, o React controla o estado do elemento select, tornando-o um componente controlado.

Aqui está um exemplo básico de como um elemento select pode ser renderizado em um componente funcional React com Hooks:

import React, { useState } from 'react';

const SelectExample = () => {
  const [selectedOption, setSelectedOption] = useState('');

  const handleChange = (event) => {
    setSelectedOption(event.target.value);
  }

  return (
    <select value={selectedOption} onChange={handleChange}>
      <option value="">Selecione...</option>
      <option value="option1">Opção 1</option>
      <option value="option2">Opção 2</option>
      <option value="option3">Opção 3</option>
    </select>
  );
}

Definindo uma opção pré-selecionada

Se você deseja ter uma opção pré-selecionada quando o componente for renderizado, você pode simplesmente definir o estado inicial para o valor dessa opção.

Aqui está como você pode fazer isso:

import React, { useState } from 'react';

const SelectExample = () => {
  const [selectedOption, setSelectedOption] = useState('option2');

  const handleChange = (event) => {
    setSelectedOption(event.target.value);
  }

  return (
    <select value={selectedOption} onChange={handleChange}>
      <option value="option1">Opção 1</option>
      <option value="option2">Opção 2</option>
      <option value="option3">Opção 3</option>
    </select>
  );
}

Neste exemplo, a opção “Opção 2” estará selecionada por padrão quando o componente for renderizado, porque o estado inicial ‘selectedOption’ é definido como ‘option2’.

Lidando com múltiplas opções selecionadas

Se você deseja permitir que múltiplas opções sejam selecionadas, você pode fazer isso alterando o elemento select para aceitar múltiplos valores e alterando o estado para armazenar um array de opções selecionadas.

import React, { useState } from 'react';

const SelectExample = () => {
  const [selectedOptions, setSelectedOptions] = useState(['option1', 'option2']);

  const handleChange = (event) => {
    const selected = Array.from(event.target.options)
      .filter(option => option.selected)
      .map(option => option.value);

    setSelectedOptions(selected);
  }

  return (
    <select multiple={true} value={selectedOptions} onChange={handleChange}>
      <option value="option1">Opção 1</option>
      <option value="option2">Opção 2</option>
      <option value="option3">Opção 3</option>
    </select>
  );
}

Neste exemplo, as opções ‘Opção 1’ e ‘Opção 2’ estarão selecionadas por padrão, porque o estado inicial ‘selectedOptions’ é definido como [‘option1’, ‘option2’].

Trabalhando com dados dinâmicos

Agora que temos uma compreensão básica de como deixar uma opção selecionada no React, é importante mencionar que muitas vezes você estará trabalhando com dados dinâmicos.

Por exemplo, as opções em seu elemento select podem ser originárias de uma chamada de API.

Nesse caso, o estado inicial pode não estar disponível imediatamente. Assim, o valor inicial do estado pode ser definido como null ou vazio, e então alterado uma vez que os dados estejam disponíveis.

import React, { useState, useEffect } from 'react';

const SelectExample = () => {
  const [selectedOption, setSelectedOption] = useState('');
  const [options, setOptions] = useState([]);

  useEffect(() => {
    // Simulando uma chamada de API
    setTimeout(() => {
      setOptions(['option1', 'option2', 'option3']);
      setSelectedOption('option2');
    }, 2000);
  }, []);

  const handleChange = (event) => {
    setSelectedOption(event.target.value);
  }

  return (
    <select value={selectedOption} onChange={handleChange}>
      {options.map((option, index) => <option key={index} value={option}>{option}</option>)}
    </select>
  );
}

Seleção de Opções Aninhadas

Outra situação comum é ter que gerenciar a seleção de opções aninhadas, onde a seleção de uma opção determina as opções disponíveis em uma seleção subsequente.

Neste caso, o estado inicial de ambas as seleções pode ser vazio e, em seguida, o estado da segunda seleção pode ser alterado com base na seleção da primeira.

import React, { useState } from 'react';

const SelectExample = () => {
  const [firstSelection, setFirstSelection] = useState('');
  const [secondSelection, setSecondSelection] = useState('');
  const [secondOptions, setSecondOptions] = useState([]);

  const firstOptions = ['option1', 'option2', 'option3'];

  const handleChangeFirst = (event) => {
    setFirstSelection(event.target.value);

    // Defina as opções de segunda seleção com base na primeira seleção
    switch (event.target.value) {
      case 'option1':
        setSecondOptions(['option1.1', 'option1.2']);
        break;
      case 'option2':
        setSecondOptions(['option2.1', 'option2.2']);
        break;
      case 'option3':
        setSecondOptions(['option3.1', 'option3.2']);
        break;
      default:
        setSecondOptions([]);
    }
  }

  const handleChangeSecond = (event) => {
    setSecondSelection(event.target.value);
  }

  return (
    <div>
      <select value={firstSelection} onChange={handleChangeFirst}>
        {firstOptions.map((option, index) => <option key={index} value={option}>{option}</option>)}
      </select>

      <select value={secondSelection} onChange={handleChangeSecond}>
        {secondOptions.map((option, index) => <option key={index} value={option}>{option}</option>)}
      </select>
    </div>
  );
}

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Chegamos ao fim do artigo sobre como deixar a option selecionada no React JS!

A seleção de opções em um elemento select no React é um pouco diferente do que você pode estar acostumado com o HTML padrão, mas com a compreensão do conceito de componentes controlados, fica bastante simples.

Ao gerenciar o valor selecionado através do estado do componente, você pode ter um controle mais preciso sobre o comportamento do seu formulário, permitindo uma experiência de usuário mais fluida e reativa.

Está buscando em evoluir como Programador? Confira o nossos cursos de programação.

Inscrever-se
Notificar de
guest

0 Comentários
mais antigos
mais recentes Mais votado
Feedbacks embutidos
Ver todos os comentários