Andres Elizondo Andres Elizondo - 16 days ago 7
TypeScript Question

TypeScript Redux React: How to iterate through a component children

I have an array of Notifications as a prop for my NotificationCenter component.

When an user clicks on any notification (or on the "Mark All As Read" button), they should be marked as 'isRead = true' and then re-render it with another color on the UI.

I already did everything (Actions, Events, etc.) but now I need to trigger the Reducer so my Notifications prop can be re-rendered.

This is my code so far:

if (isType(action, ActionTypes.MarkNotificationsAsRead)) {
return Object.assign({}, state, {
notifications: state.notifications.map(n => action.payload.<<HELP>>)
} as INotificationCentreState);


"state.notifications" is my Notification prop with all the available notifications.

"action.payload" is the string array containing the IDs of the notifications that I should match and then modify to 'notification.isRead = true'.

The main issue that I'm having here is that I can't mutate my notification list and I'm not completely sure how .map() works.

Can anyone give me a hint? I hope my problem is clear.

Thanks!

Answer

You could toggle the isRead depending on whether id of current notification is in action.payload

state.notifications.map(n => Object.assign({}, n, {isRead: action.payload.indexOf(n.id) > -1}))
Comments