How can i update select option from state in react.js

Question

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.

Answer 1

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