Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

107
Visualizações
How can i update select option from state in react.js

I created an input, when you write something and click on the button, value adds to our state, now I am trying to update select option from state like this:

const NewGroup = () => {
  const [group, setGroup] = useState([]);
  const addToGroup = (e) => {
    const newGroup = group;
    newGroup.push(e.target.previousElementSibling.value);
    setGroup(newGroup);
  };
  return (
    <div>
      <input type="text" name="" id="" />
      <button onClick={addToGroup}>submit</button>
      <div>
        <select name="" id="">
          {group.map((category) => {
            return <option value=''>{category}</option>;
          })}
        </select>
      </div>
    </div>
  );
};
export default NewGroup;

But nothing did happened.

about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

You can introduce another useState() for writing into <input> element. And when the Submit button is pressed, you only push the someText to the group array.

const NewGroup = () => {
  const [group, setGroup] = useState([]);
  const [someText, setSomeText] = useState("");
  const addToGroup = (e) => {
    // Takes up all the present elements(of array group) and adds new element (search)
    let temp = [...group, someText];
    setGroup(temp);
  };
  return (
    <div>
      <input type="text" name="" id="" value={someText} onChange={(e) => { setSomeText(e.target.value); }} />
      <button onClick={addToGroup}>submit</button>
      <div>
        <select name="" id="">
          {group.map((category, index) => {
            return (
              <option key={index} value="">
                {category}
              </option>
            );
          })}
        </select>
      </div>
    </div>
  );
}

export default NewGroup;

Here's the link to the working app https://codesandbox.io/s/boring-ptolemy-0cwzmi?file=/src/App.js

about 4 years ago · Juan Pablo Isaza Relatório

0

First, you should not be getting the value of your input by using the DOM directly, instead you should be using a Ref.

Secondly, the issue is that you're mutating the group value directly instead of copying it. When you call setGroup, React doesn't realize there was any change (because the previous value equals the current value). Instead you want to copy the array and add your new element:

// Previously: const newGroup = group;
const newGroup = [...group];

That should be all you have to do to get your code to work. However, I simplified and cleaned it up a little more with inline comments below.

const NewGroup = () => {
    // Here's where our input will be stored so we can use it later (instead of querying the dom directly)
    const inputRef = React.useRef();
    const [group, setGroup] = React.useState([]);
    // Use React.useCallback so the function doesn't change on every render
    const addToGroup = React.useCallback((e) => {
        // We call setGroup with a function that returns the new group value. The first argument is the current group value. We return a new array by spreading the existing value and adding our new value
        setGroup((v) => [...v, inputRef.current.value]);
    }, []);
    return (
        <div>
            <input type="text" ref={inputRef} name="" id="" />
            <button onClick={addToGroup}>submit</button>
            <div>
                <select name="" id="">
                    {group.map((category) => {
                        return (
                            <option value="" key={category}>
                                {category}
                            </option>
                        );
                    })}
                </select>
            </div>
        </div>
    );
};
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda