React set input value to object property not editable

Question

I'm setting the value of an input to a property on an object (from the state). I have an onChange event to update the state. However, when I try to type, it doesn't actually update in the input. If I don't use an object and just have a string, it works fine. How can I fix this?

Demo of the issue
My code:

import React from "react";

export function App() {
  const [data, setData] = React.useState({
    test: "hello"
  });
  
  const change = (e) => {
    data.test = e.target.value;
    setData(data);
  };

  return <input value={data.test} onChange={change}></input>;
}

You can look into this https://stackoverflow.com/questions/37755997/why-cant-i-directly-modify-a-components-state-really — Aman Sadhwani, Jun 11 '22 at 23:39

score 0 · Accepted Answer · answered Jun 11 '22 at 23:46

0

Per the comment by Aman Sadhwani, I used spread syntax to update the state without modifying the original object.

const change = (e) => {
    setData({
        ...data,
        test: e.target.value
    });
};

answered Jun 11 '22 at 23:46

asportnoy

2,218
2
17
31

score 0 · Answer 2 · answered Jun 12 '22 at 03:17

Thanks, @Aman Sadhwani. Use Spread operator to update the state.

import React from "react";

export function App() {
  const [data, setData] = React.useState({
    test: "hello"
  });
  
  const change = (e) => {
    setData({
    ...data
    test:e.target.value
    });
  };

  return <input value={data.test} onChange={change}></input>;
}

React set input value to object property not editable

2 Answers2