single source of truth between parent and child components in React

by

I am working on a data form which has a custom component made up of three input fields. The component looks like this :

Single row

I can also append more rows of the same component:

enter image description here

I want the main form to always have a copy of the component input data so it can be attached to an REST API request.

Now my question is where should I keep my single source of truth? Inside the individual rows themselves or shall I keep it in the form like so :

enter image description here

Thanks in advance.

  • You already answered your question yourself: “I want the main form to have the component input data“

    – 

  • Also, the parent form needs to keep (and modify) the state to be able to add and remove rows.

    – 

Leave a Comment