update value inside array object

Question

I only want to replace the name with the new name being typed in from the user. I'm using react redux typescript and its proving to be quite difficult. All the passed in arguments work, the newName and index, I just need to update the array object then return it with only the name in the index object changed.

My code:

Action:

export const updateName = (newName: string, index: number) => (
  dispatch: (arg0: { type?: string; newName: string; index: number }) => any
) => {
  dispatch({
    type: UPDATE_NAME,
    newName,
    index
  });
};

Reducer:

case UPDATE_NAME:
      return {
        ...state
        items[action.index].name: action.newName,

      };

State looks like this:

items: Array(50)
0: {id: "1d0b1095-f0b4-4881-8d5e-74c86d5beee2", name: "A Ipsum Debitis", participants: {…},
1: {id: "7384a574-1592-484e-9404-e876bf45410c", name: "Distinctio Blanditiis Voluptatibus Ut", participants: {…},

Drew Reese · Accepted Answer · 2021-03-16 15:36:19Z

1

Along with shallow copying the state object, you need to shallow copy any nested state that is being updated as well, i.e. state.items and the specific array element that is being updated.

case UPDATE_NAME:
  return {
    ...state,
    items: state.items.map((el, i) => i === action.index ? {
      ...el,
      name: action.newName,
    } : el),
  };

answered Mar 16, 2021 at 15:36

Drew Reese

207k19 gold badges280 silver badges292 bronze badges

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

2 Comments

artworkjpm Over a year ago

I get this message "(parameter) el: never Spread types may only be created from object types.ts(2698)"

Drew Reese Over a year ago

@artworkjpm Yup, exactly, you need to type the map callback function. Seems el would have a type similar to { id: string, name: string, participants: any }.

Collectives™ on Stack Overflow

update value inside array object

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related