React: why the input value is not displayed in the list after clicking on the "add"-button?

Question

I'm trying out React and trying to make a simple component. Input and "Add" button. I want get a list of values after filling in the input and clicking on the button. I can see that the state is getting filled, but I don't understand why the list is not being rerender.

Here is my code https://jsfiddle.net/3hkm2qnL/14/

` const InputWithAddBtn = props => { const [ value, setValue ] = React.useState('');

  return (
    <div>
      <input type="text" value={value} onChange={e => setValue(e.target.value)} />
      <button onClick={() => props.add(value)}>+</button>
    </div>
  );
};

`

Answer 1

The problem is in the add() function, which by pushing onto the original array does not signal to the component to rerender.

const add = (value) => {
    initValue.push(value)
    console.log(initValue)
    setValue(initValue)
}

One possible solution:

const add = (value) => {
    const newValues = [...initValue, value]
    console.log(newValues)
    setValue(newValues)
}

That will trigger correctly the component to rerender.

For more info see https://stackoverflow.com/a/67354136/21048989

Cheers