Change List of objects in position using map for Reactjs

Question

I would like to know how to change the item 'check' to true from position 5 on my array list.

const optionsConsultation = [
  { label: "Maçã", check: false, id: 0, disable: false },
  { label: "Banana", check: false, id: 1, disable: false },
  { label: "Pera", check: false, id: 2, disable: false },
  { label: "Uva", check: false, id: 3, disable: false },
  { label: "Morango", check: false, id: 5, disable: false},
  { label: "Laranja", check: false, id: 6, disable: false }
];

export default () => {
  const [datas, setDatas] = useState(optionsConsultation);

  useEffect(() =>{
    const resetData = datas.map(checks => checks)
    )

does this answer to your question? - https://stackoverflow.com/questions/54676966/push-method-in-react-hooks-usestate — wangdev87, Dec 15 '20 at 19:41
do you want to have `check: true` for an item with `id: 5` in `resetData` ? — Artem Matiushenko, Dec 15 '20 at 19:45
good afternoon willian, you will not go because i want to change information on the object passing as a spreed operator. e.g. {... item, [position5]: true} — Charles Lindo, Dec 15 '20 at 19:45
I want to bring the whole array and just in the position of array 5 change the check key to true — Charles Lindo, Dec 15 '20 at 19:47

Artem Matiushenko · Accepted Answer · 2020-12-15T20:22:20.127

1

If you just want to have a new resetData array with check: true for item with id: 5.

const resetData = optionsConsultation.map((item) => {
  if (item.id === 5) {
    return { ...item, check: true }
  }
  
  return item;
});

and if you want to rely only on index

const resetData = optionsConsultation.map((item, index) => {
  if (index === 4) {
    return { ...item, check: true }
  }
  
  return item;
});

edited Dec 15 '20 at 20:22

answered Dec 15 '20 at 19:53

Artem Matiushenko

814
10
14

I liked yours better because it gave me more options to change something else, you spred on the object, something that had gone unnoticed by me, Thanks – Charles Lindo Dec 15 '20 at 20:15
1

`{ ...item, check: true }` would be enough, it's unnecessary to create a new object just to spread it right away. – Emile Bergeron Dec 15 '20 at 20:16
yeah, I modified the solution with @EmileBergeron suggestion – Artem Matiushenko Dec 15 '20 at 20:23
you are the man! – Charles Lindo Dec 15 '20 at 20:24

Vladimir Ivanenko · Answer 2 · 2020-12-15T20:10:22.180

Changing values in nested objects/arrays could be really tedious.

If in your application you do it often I would like to recommend try using Immer (https://github.com/immerjs/use-immer).

Otherwise it's quite fine to do tike this:

//
const targetItemIndex = 5;
const resetData = [
  ...datas.slice(0, targetItemIndex),
  { ...datas[targetItemIndex], check: true },
  ...datas.slice(targetItemIndex + 1)
];
//

or like this:

const targetItemIndex = 5;
const resetData = datas.map((item, index) => {
  if (index === targetItemIndex) {
    return { ...item, check: true };
  }

  return item;
});

Change List of objects in position using map for Reactjs

2 Answers2