React setState inside onChange function doesn't update input values

Question

function ProjectsComponent() {
  const [state, setState] = useState({ one: 1, two: 2 });

  const handleChange = (e) => {
    setState({ ...state, two: state.one + 5 });
    console.log(state);
  };

  return (
    <form>
      <input defaultValue={state.one} onChange={handleChange} />
      <input defaultValue={state.two} />
    </form>
  );
}

When the first input changes, function handleChange is triggered, which changes the state of key two from 2 to 5+1 which is 6, but the second input default value defaultValue = {state.two} is still 2, how to update its value?

Does this answer your question? [React input defaultValue doesn't update with state](https://stackoverflow.com/questions/30146105/react-input-defaultvalue-doesnt-update-with-state) — jonrsharpe, Sep 21 '22 at 15:49

score 2 · Accepted Answer · answered Sep 21 '22 at 15:27

The purpose of the defaultValue prop is to set the initial value only. After the first render, the prop has no effect. By using the input in this way, you have an "uncontrolled" input. Typing into the input will update it, but you have no way other than that to set its value.

If you need to change the value externally, then you need to use a "controlled" component, which means you need to use value instead of defaultValue:

function ProjectsComponent() {
  const [state, setState] = useState({ one: 1, two: 2 });

  const handleChange = (e) => {
    setState({ ...state, two: 1 + 5 });
  };

  const handleChangeTwo = (e) => {
    // I'm guessing this is what you want if input 2 is typed in
    setState({ ...state, two: e.target.value });
  }

  return (
    <form>
      <input value={state.one} onChange={handleChange} />
      <input value={state.two} onChange={handleChangeTwo} />
    </form>
  );
}

More info on controlled and uncontrolled components:

https://reactjs.org/docs/forms.html#controlled-components https://reactjs.org/docs/uncontrolled-components.html

but then if i did ```setState({ ...state, two: state.one + 5 });``` , the value of ```state.one``` will always be the value before change — aasem shoshari, Sep 21 '22 at 16:01
What would you like `state.one` to be? Are you looking for `setState({ one: e.target.value, two: 1 + 5 })`? — Nicholas Tower, Sep 21 '22 at 16:07
no, suppose i have many keys, e.g. one two three ..etc, when one changes, i want to set the state and use the updated value of one to set other keys — aasem shoshari, Sep 21 '22 at 17:51

score 0 · Answer 2 · answered Sep 21 '22 at 15:38

0

write your console.log() out of the handleChange, you will see that it changes the state

const handleChange = (e) => {
setState({ ...state, two: 1 + 5 });
};

console.log(state);

answered Sep 21 '22 at 15:38

mouafus

148
7

score 0 · Answer 3 · answered Sep 21 '22 at 15:41

0

Just replace prop defaultValue with value in both the Input components.

like this: `

<input value={state.one} onChange={handleChange} />
<input value={state.two} />

`

*Note: defaultValue prop is to set the initial value only, unlike value which sets the value of the component for each rerender.

answered Sep 21 '22 at 15:41

Gourav Kumar

77
6

but then if i did setState({ ...state, two: state.one + 5 }); , the value of state.one will always be the value before change, that's the real issue, i spent a whole day trying to solve this – aasem shoshari Sep 21 '22 at 16:02

React setState inside onChange function doesn't update input values

3 Answers3