React nested state modification

Question

I have a table and in each row there is one meal. Each meal consist of many ingredients. I want to be able to either delete ingredient and to delete meal. How should the state and the delete ingredient function look like?

Should the state look like this:

{
   meals: [{name:'breakfast', id:11}, ...]
   ingredients: [{name: 'eggs', id:111, meal_id:11}...] 
}

or this:

{
   meals: [{
       name:'breakfast',
       ingredients: [{name: 'eggs'}]
   }]
}

I think that the second option is better. And the most important question: How should the delete ingredient function looks like? Should each ingredient has its own unique id and should I dispatch a delete action passing ingredient id?

vijayst · Accepted Answer · 2016-08-10 08:44:59Z

1

Meals should be the parent component. For each meal child component, the meal-id, name, ingredients should be passed as props. The meal should have a list of ingredient child components with ingredient details passed in. The id should be passed to both meal and ingredient component as each child component should have an unique key.

The event handlers for delete ingredient should be handled in the meal component where the corresponding ingredient is deleted and is reflected in the props. Similarly, the meal should be deleted by the parent Meals component and the new state should be passed down as props.

answered Aug 10, 2016 at 8:44

vijayst

22.1k18 gold badges73 silver badges113 bronze badges

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

Collectives™ on Stack Overflow

React nested state modification

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related