How to update value of a key in object in an array with the new value in React useState in TypeScript

I have a function that gets input as the name of the input filed and the value of that input field as

function handleChange(e:React.ChangeEvent<HTMLInputElement>):void{
    const { name, value } = e.target;
    const key = name
    let newArr = [...form];
    newArr.map(item => {
      return {...form , [key]: value}
    });

    setForm(newArr)
  }

The structure of the default view is like this:

    const form = [{
  "Name":"Nagesh",
  "Email":"abc@gmail.com",
  "Address" : {
    "House_Number":"123",
    "Street_Name":"something",
    "City":"example",
  },
  "Phone_Number":"567899090"
}]

Now after hitting the onChange event, I receive the name of the input field and the value of the current input field to the handleChange function. The issue is newArr doesn’t update the old value with the new value and doesn’t update the state with new values.

For example if I pass the value to name as the name of the input field which is ‘Name’ and its value as ‘Nagesh Katna’, it gets the values but doesn’t update the newArr’s filed [{"Name": "Nagesh Katna"}]

If I console.log(newArr). The array stays with the default values. I am using TypeScript and semantic-UI as the frontend.

I have defined an interface with the same structure for form and using the states in a way

  const defaultView: Values[] = []
  const [form, setForm]: [Values[], (fetch: Values[]) => void] = useState(defaultView);

Please save my weekend.

Answer

You’re creating a new array here, a shallow copy of the form:

let newArr = [...form];

And you’re mapping over it to create another new array here:

newArr.map(item => {
  return {...form , [key]: value}
});

But you never use the result of the .map. You need to assign it to a variable, and pass that to setForm.

Also, the { ...form is probaly a typo – did you mean { ...item?

const newForm = newArr.map(item => {
  return {...item , [key]: value}
});
setForm(newForm);

More concisely:

setForm(
    form.map(item => ({
        ...item,
        [name]: value
    }))
);