How to update an object element in array with specific index, React State

Question

The code below is what I'm trying to do update main_id and sub_ids in the state.

I got stucked from here...

const [state, setState] = useState({
    ids: [
      {
        main_id: null,
        sub_ids: []
      }
    ]
  });

//this is what I've tried..
const handleState = index => (v) => {
  setState({...setState, ids: setState.ids.map((x,i)=>(
      i === index ? {x.main_id: v.id, sub_ids: []})

    ))})
}

I'm using this function on same component which means it adds in specific index of array with different object.

<componentOne onChange ={handleState(k)}/>
<componentTwo onChange={handlestate(k)} />

The state that I desired to get after this,


state ={
ids:[
      {
     main_id: v.id,
     sub_ids:[]
      },
      {
     main_id: v.id,
     sub_ids:[]
      }
   ]
}

Drew Reese · Accepted Answer · 2020-08-11 23:35:17Z

3

Looks like you are trying to spread in your state updater function (setState) versus your current state object (state).

Shallow copy existing state, then also shallow copy the element when the index matches. You should also use a functional state update.

const handleState = index => v => {
  setState(state => ({
    ...state, // <-- copy previous state
    ids: state.ids.map((x, i) =>
      i === index
        ? {
            ...x, // <-- on match, copy element, then update properties
            main_id: v.id,
            sub_ids: [],
          }
        : x, // <-- non-match, just pass element through
    ),
  }));
};

It may be a little clearer to simplify your state though since it appears you overwrite the entire element object.

const [ids, setIds] = useState([
  {
    main_id: null,
    sub_ids: []
  }
]);

const handleState = index => v => {
  setIds(ids => ids.map((x, i) =>
      i === index
        ? {
            main_id: v.id,
            sub_ids: [],
          }
        : x,
    ),
  }));
};

edited Aug 11, 2020 at 23:35

answered Aug 11, 2020 at 23:26

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

H K Over a year ago

Thank you, It works perfectly. But can I ask one more question. So I'm using this function for other same component. What should I do if I want to add same structure of 'ids' on ext index of it? I edited desired result

Drew Reese Over a year ago

@HK Sorry, I don't quite follow the question. Are you asking how to append new "empty" entries into your state data?

H K Over a year ago

I want to use this function on same component. components are currently generated by map function with index

Drew Reese Over a year ago

@HK Ah, I see. Do both components render the same data in the same way? i.e. is the kindex k going to be the same for both? Or is all the same component, just different instances of it from the map function? It may be easier to just update your question to include a snippet of how you are mapping to components and attaching the handleState callback.

H K Over a year ago

k is incremented by +1. And Yes, same component and similar data but different instances of it from the map function.

|

Collectives™ on Stack Overflow

How to update an object element in array with specific index, React State

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related