Popular posts

Does this Codepen example help?

codepen.io/AaronLeoCooper/pen/VMmwXr

The basic architecture here is:

• All lists data is stored inside the App component (in a real app this could be a Redux/MobX store, or if you don't have either, then just a component keeping it in state). Inside App there are also methods to update lists— updating a changed list with new lists data, adding a new list, and deleting a list
• Each item in the lists array is used to render a List component. The List component has methods to: update a changed list item (if it was marked as done/not done), add a new list item, delete a list item, and a special method to delete the entire list (which calls the delete list method passed in from App component)
• Each item from each list is used to render a ListItem component. This is purely there to render to the view the item's label, as well as buttons to call the methods passed in from List component to toggle between Done/Not Done and delete the item

Data flows down like this: App -> List -> ListItem (render to view).

And when an item was interacted with, the change in data flows like this: ListItem -> List -> App (update state), which triggers a re-render, and the newly updated list data flows back down the tree, back into the List and ListItems that need to be re-rendered.

For fun, I also added a Chart component, rendered by App. This is just there to show how the state stored inside App can also be used to pass into another component for display purposes. So in addition to Lists and ListItems being re-rendered upon changes to the lists state data, Chart and ChartBar components also re-render when lists and their items change in some way.

From your question I couldn't work out exactly what issues you were facing, but this is at least a working example of more or less (I hope!) what you're trying to create. Your list data could contain more data as required too to keep more data stored per list, such as a list description field, or a colour.

Hope that helps!