Updating State for changed item not displaying on react frontend

Question

I am working on my reducer and I am trying to get the case for UPDATE working.

I am just trying to update the list on my react frontend when a certain object ID changes in the state. How can I make it so the item with a certain ID changes on the frontend in this reducer.

I tried this in UPDATE_ANIMALS, but no luck

case 'UPDATE_ANIMALS':     
    return [      
        ...state, item => item.id === action.payload.id ? action.payload : item

];

Below is my entire reducer.

export const ANIMALSReducer = (state = [], action) => {
  switch (action.type) {
    case 'FETCH_ANIMALS':
      return action.payload;
    case 'ADD_ANIMALS': 
      return [...state, action.payload]; 
    case 'DELETE_ANIMALS': 
      return [      
      ...state.filter(item => item.id !== action.payload)
     ]; 
     case 'UPDATE_ANIMALS':     
      return [      
        NOT SURE WHAT TO PUT HERE
       ];
    default:
      return state;
  }
};

Does this answer your question? How to update single value inside specific array item in redux — Emile Bergeron
– Emile Bergeron, Commented Aug 4, 2021 at 21:52
I tried on my end but i am not sure i am doing it right. Just get an error of undefined. — john samcock
– john samcock, Commented Aug 4, 2021 at 21:58
There's probably something else that's incorrect on your end, but without a minimal reproducible example, we can only guess! — Emile Bergeron
– Emile Bergeron, Commented Aug 4, 2021 at 22:02

jean182 · Accepted Answer · 2021-08-04 22:01:37Z

2

You can achieve that very easily using the map function, basically you're generating a new array and the matching item given your payload will be updated with the payload instead the original:

case 'UPDATE_ANIMALS':  
    return state.map(item => item.id === action.payload.id ? action.payload : item);

edited Aug 4, 2021 at 22:01

answered Aug 4, 2021 at 21:58

jean182

3,5332 gold badges21 silver badges32 bronze badges

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

4 Comments

jean182 Over a year ago

That is true, I will update the code, thanks

john samcock Over a year ago

Hmm its not updating on the frontend.

jean182 Over a year ago

Can you post what does the action.payload is returning?

john samcock Over a year ago

It started to work! Was just a bug on my side.

Collectives™ on Stack Overflow

Updating State for changed item not displaying on react frontend

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related