React - Rending JSON as UI objects and allowing any user changes to these UI objects to update the JSON

Question

We have an internal tooling system that uses JSON to specify various actions, tasks etc. I'm making a single page web application to visualise this information. The web application contains a text area for editing/pasting JSON and another area which renders the JSON into UI elements.

So I want to take JSON from the text area and visualize it. But also, I want the user to be able to interact with this render visualization, making changes/configuring options and have it update the JSON immediately. I guess one could call that two-way binding.

While going from JSON -> HTML DOM elements is easy, I'm not sure how to do the reverse and go DOM -> JSON. Let's say we have some JSON

{"task1" : { 
  "canFail" : true, 
  "autoRestart" : false, 
  "connectionPropertys" : { 
    ... }
}
}

I would visualize task1 as some UI element with check boxes for canFail and autoRestart. I want the user to be able to both

1. edit the JSON "canFail" value to 'true' or 'false' and have that immediately render (this is easy - just re-render the entire JSON)
2. check or uncheck the canFail checkbox and have the JSON be automatically updated (hard part - where I'm stuck)

In React we pass state/properties down the the children, so the component rending the checkbox(es) would only know about canFail or autoRestart... it might not know about "task1". If the checkbox is changed, sure I can have some handler function fire, but it doesn't actually know what key/value in the JSON this corresponds to (e.g. it knows nothing of task1 and there could be multiple task1s).

Interested to know what a good approach would be here to tackle this. Thanks :)