Our great sponsors
-
-
todomvc
Helping you select an MV* framework - Todo apps for React.js, Ember.js, Angular, and many more
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
In case you are open for a new State Manager.. AgileTs provides a simple class called 'Collection' which helps us to keep track of a reactive Objects Array. https://agile-ts.org/docs/core/collection
If you look at the todomvc example for vanilla react, the way they're handling this shared state between parent component and children is through an external "TodoModel" which re-renders the whole component tree on every change. Granted it's a bit outdated, but it's the closest public showcase solution I could find (TodoMVC is to compare how different frameworks aproach the exact same problem)
However if you don't care for testing (which you should) or Storybook, then you might find something like Jotai (Recoil alternative) to help you, where you'd have an atom for the ingredient list and then derived atoms for each ingredient, but I'll be honest and say I don't have much experience with the library. I just think something like Redux would way overcomplicate it compared to sticking with React's state model. I'd rather use something like Constate then that's a small helper to make contexts with hooks.