TypeScript Redux React: How to iterate through a component children

Question

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!

Pavel Staselun · Accepted Answer · 2016-11-16 15:12:20Z

1

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}))

answered Nov 16, 2016 at 15:12

Pavel Staselun

2,0201 gold badge13 silver badges24 bronze badges

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

1 Comment

Andres Elizondo Over a year ago

Thank you!! I just needed to add a condition at the end because it was toggling the IsRead property, but it worked as a charm! IsRead: action.payload.indexOf(n.Id) > -1 ? true : n.IsRead

Collectives™ on Stack Overflow

TypeScript Redux React: How to iterate through a component children

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related