How do I update states `onChange` in an array of object in React Hooks

Question

I have retrieved data stored using useState in an array of object, the data was then outputted into form fields. And now I want to be able to update the fields (state) as I type.

I have seen examples on people updating the state for property in array, but never for state in an array of object, so I don't know how to do it. I've got the index of the object passed to the callback function but I didn't know how to update the state using it.

// sample data structure
const data = [
  {
    id: 1,
    name: 'john',
    gender: 'm'
  }
  {
    id: 2,
    name: 'mary',
    gender: 'f'
  }
]

const [data, setData] = useState([]);

const updateFieldChanged = index => e => {
  console.log('index: ' + index);
  console.log('property name: '+ e.target.name);

  setData() // ??
}

return (
  <React.Fragment>
    {data.map((data, index) => {
      <li key={data.name}>
        <input type="text" name="name" value={data.name} onChange={updateFieldChanged(index)} />
      </li>
    })}
  </React.Fragment>
)

naffetS · Accepted Answer · 2022-08-28T01:28:44.487

220

Here is how you do it:

// sample data structure
/* const data = [
  {
    id:   1,
    name: 'john',
    gender: 'm'
  }
  {
    id:   2,
    name: 'mary',
    gender: 'f'
  }
] */ // make sure to set the default value in the useState call (I already fixed it)

const [data, setData] = useState([
  {
    id:   1,
    name: 'john',
    gender: 'm'
  }
  {
    id:   2,
    name: 'mary',
    gender: 'f'
  }
]);

const updateFieldChanged = index => e => {
  console.log('index: ' + index);
  console.log('property name: '+ e.target.name);
  let newArr = [...data]; // copying the old datas array
  // a deep copy is not needed as we are overriding the whole object below, and not setting a property of it. this does not mutate the state.
  newArr[index] = e.target.value; // replace e.target.value with whatever you want to change it to

  setData(newArr);
}

return (
  <React.Fragment>
    {data.map((datum, index) => {
      <li key={datum.name}>
        <input type="text" name="name" value={datum.name} onChange={updateFieldChanged(index)}  />
      </li>
    })}
  </React.Fragment>
)

edited Aug 28 '22 at 01:28

answered May 05 '19 at 00:54

naffetS

3,087
2
14
24

5

Thanks it kind of works. I can target to any specific property name in the object like this `let propertyName = e.target.name;` `newArr[index][propertyName] = e.target.value;`. But after typing one letter, it didn't stay in focus on the text field, I would have to click on the field again to enter another letter. – reddy May 05 '19 at 01:54
That is very strange. I made a fiddle on jsfiddle here and it works fine for me: https://jsfiddle.net/5w9n7cy6/ – naffetS May 05 '19 at 02:38
3

Okay I figured it out, it was the key in the `
` tag that caused it because it shared the same value as the input field, so when that value changed, the whole
refreshed as well. Setting `key={index}` fixed it.

reddy

May 05 '19 at 03:25

11

This mutates the current state. Spread operator only does shallow copy. – vinayr Nov 14 '20 at 14:38

1

@vinayr In this case, a deep copy is not needed. – naffetS Jan 14 '21 at 04:16

FTR, for some reason my text field wasn't updating. I fixed it by simply removing the value prop. – Esteban Vargas Jan 18 '22 at 21:37

in large data with paging, deep copy is needed instead of refresh all object, i think so – famfamfam May 09 '23 at 09:34

score 116 · Answer 2 · edited Feb 16 '23 at 17:45

116

The accepted answer leads the developer into significant risk that they will mutate the source sequence, as witnessed in comments:

let newArr = [...data];
// oops! newArr[index] is in both newArr and data
// this might cause nasty bugs in React.
newArr[index][propertyName] = e.target.value;

This will mean that, in some cases, React does not pick up and render the changes.

The idiomatic way of doing this is by mapping your old array into a new one, swapping what you want to change for an updated item along the way.

setData(
    data.map(item => 
        item.id === index 
        ? {...item, someProp : "changed", someOtherProp: 42}
        : item 
))

edited Feb 16 '23 at 17:45

isherwood

58,414
16
114
157

answered May 05 '19 at 01:02

spender

117,338
33
229
351

1

My`index` is referring to the index of the object in the array, not the property `id` of the object – reddy May 05 '19 at 02:00
1

For me this didn't quite work. I had to use: `setUsers(users.map(usr => usr.subjectId === updatedUser.subjectId ? { ...updatedUser } : usr));` In my case the subjectId is what is the unique key in my list. Essentially I'm mapping my list and returning the original object in the list, unless the id matches the one i want to update. In that case I return a new object with all the properties of my updated one. – Jason Masters Nov 22 '19 at 21:11

ohlr · Answer 3 · 2021-05-27T13:10:06.897

13

setDatas(datas=>({
   ...datas,
   [index]: e.target.value
}))

with index being the target position and e.target.value the new value

edited May 27 '21 at 13:10

answered May 26 '21 at 21:48

ohlr

1,839
1
13
29

2

This doesn't really work (in all cases) because the resulting object is not a real Array, Array.isArray wil return false and you won't be able to use Array methods on your data. – Alexis Nov 04 '21 at 15:07
1

This doesn't fit to the question as this answers to an object not to an array of objects. – Adam A Allalou Nov 15 '22 at 09:54

score 8 · Answer 4 · answered Feb 20 '21 at 03:13

You don't even need to be using the index ( except for the key if you want ) nor copying the old datas array,and can even do it inline or just pass data as an argument if you prefer updateFieldChanged to not be inline. It's done very quickly that way :

  const initial_data = [
    {
      id: 1,
      name: "john",
      gender: "m",
    },
    {
      id: 2,
      name: "mary",
      gender: "f",
    },
  ];

  const [datas, setDatas] = useState(initial_data);

  return (
    <div>
      {datas.map((data, index) => (
        <li key={index}>
          <input
            type="text"
            value={data.name}
            onChange={(e) => {
              data.name = e.target.value;
              setDatas([...datas]);
            }}
          />
        </li>
      ))}
    </div>
  );
};

This mutates the source sequence, which may lead to unexpected bugs. — spender, Oct 26 '22 at 11:13

score 5 · Answer 5 · answered Sep 17 '20 at 02:17

This is what I do:

const [datas, setDatas] = useState([
  {
    id: 1,
    name: "john",
    gender: "m",
  },
  {
    id: 2,
    name: "mary",
    gender: "f",
  },
]);

const updateFieldChanged = (name, index) => (event) => {
  let newArr = datas.map((item, i) => {
    if (index == i) {
      return { ...item, [name]: event.target.value };
    } else {
      return item;
    }
  });
  setDatas(newArr);
};

return (
  <React.Fragment>
    {datas.map((data, index) => {
      <li key={data.name}>
        <input
          type="text"
          name="name"
          value={data.name}
          onChange={updateFieldChanged("name", index)}
        />
      </li>;
      <li key={data.gender}>
        <input
          type="text"
          name="gender"
          value={data.gender}
          onChange={updateFieldChanged("gender", index)}
        />
      </li>;
    })}
  </React.Fragment>
);

score 2 · Answer 6 · answered Dec 01 '21 at 11:14

Spread the array before that. As you cannot update the hook directly without using the method returned by useState

const newState = [...originalState]
newState[index] = newValue
setOriginalState(newState)

This will modify the value of the state and update the useState hook if its an array of string.

DEEPTHI MUKUNDAN · Answer 7 · 2022-03-03T12:25:11.100

const updateFieldChanged = index => e => {
   
   name=e.target.name //key
  
   let newArr = [...data]; // copying the old datas array
   newArr[index][name] = e.target.value; //key and value
   setData(newArr);
}

return (
  <React.Fragment>
    {data.map((datum, index) => {
      <li key={datum.name}>
        <input type="text" name="name" value={datum.name} onChange={updateFieldChanged(index)}  />
      </li>
    })}
  </React.Fragment>
)

score 1 · Answer 8 · answered Sep 24 '22 at 15:15

const [datas, setDatas] = useState([ { id: 1, name: 'john', gender: 'm' } { id: 2, name: 'mary', gender: 'f' } ]);

const updateFieldChanged = (index, e) => { const updateData = { ...data[index], name: e.target.name }

setData([...data.slice(0, index), updateData, ...data.slice(index + 1)]) }

score 0 · Answer 9 · answered Sep 07 '22 at 09:03

I am late to reply but I had also same problem, so I got solution through this query. Have a look on it if it can help you.The example that I did is that I have a state , named OrderList, and so a setter for it is SetOrderList. To update a specific record in a list, am using SetOrderList and passing it a map function with that list of which I need to change, so I will compare Index or Id of my list, where it will match, I will change that specific record.

const Action = (Id, Status) => { //`enter code here`Call this function onChange or onClick event
 setorderList([...orderList.map((order) =>
            order.id === Id ? { ...order, status: Status } : order
          ),
        ]);
}

score 0 · Answer 10 · answered Sep 07 '22 at 09:36

complete example for update value based on index and generate input based on for loop....

import React, { useState,useEffect } from "react";

export default function App() {
  const [datas, setDatas] =useState([])

  useEffect(() => {
    console.log("datas");
    console.log(datas);
}, [datas]);

  const onchangeInput = (val, index) =>{
    setDatas(datas=>({
      ...datas,
      [index]: val.target.value
    }))
    console.log(datas);
  }

  return (
    <>


      {
      (() => {
          const inputs = [];
          for (let i = 0; i < 20; i++){
            console.log(i);
            inputs.push(<input key={i} onChange={(val)=>{onchangeInput(val,i)}} />); 
          }
          return inputs;
      })()
    }
  
    </>
  );
}

score 0 · Answer 11 · answered Oct 05 '22 at 14:47

const MyCount = () =>{
  const myData = [
    {
      id: 1,
      name: 'john',
      gender: 'm'
    },
    {
      id: 2,
      name: 'mary',
      gender: 'f'
    }
  ]
  const [count, setCount] = useState(0);
  const [datas, setDatas] = useState(myData);

  const clkBtn = () =>{
    setCount((c) => c + 1);
  }

  

  return(
    <div>
      <button onClick={clkBtn}>+ {count}</button>
        {datas.map((data, index) => (
          <li key={index}>
            <input
              type="text"
              value={data.name}
              onChange={(e) => {
                data.name = e.target.value;
                setDatas([...datas]);
              }}
            />
          </li>
        ))}
    </div>
  )
}

score -1 · Answer 12 · answered Mar 18 '21 at 17:50

-1

Base on @Steffan, thus use as your way:

const [arr,arrSet] = useState(array_value);
...
let newArr = [...arr];
  arr.map((data,index) => {
    newArr[index].somename= new_value;
  });
arrSet(newArr);

Use useEffect to check new arr value.

answered Mar 18 '21 at 17:50

Tony

259
3
13

user17233718 · Answer 13 · 2021-10-24T12:07:22.183

A little late to the party, but it is an option to spread the contents of the array in a new object, then replacing the desired object in the selected index and finally producing an array from that result, it is a short answer, probably not the best for large arrays.

// data = [{name: 'tom', age: 15, etc...}, {name: 'jerry', age: 10, etc...}]
// index = 1
setData(Object.values({...data, [index]: {...data[index], name: 'the mouse' }}))
// data = [{name: 'tom', age: 15, etc...}, {name: 'the mouse', age: 10, etc...}]

How do I update states `onChange` in an array of object in React Hooks

13 Answers13

Linked

Related