I'm working on a simple react app that quickly becomes unmanageable due to the "moving state up" philosophy. In the app, there are a number of nested fields in which the user inputs all kinds of data: strings, pixel grids, etc. Each field is a component.

Then, when the user is done, they can export their work in JSON format. Because of this, the parent technically needs access to the state of all the children, so I moved the state from each of the (nested) fields all the way to the parent component. But this becomes massively unwieldy: all the functions for modifying state are concentrated in the parent class, and prop-drilling abounds. This isn't a plain old form--the user is creating an entire document, with nested subsections, so the state and all of the functions that modify it are quite complex.

Here's the thing: the parent component does not need the state of the children until the export button is clicked, and all it needs to do is read it. One could therefore imagine a different solution: store the state in the relevant child component until export, and then, the parent function could collate the states of all its children in a JSON file and export. This seems like a much more elegant solution.

Is there a react-y way of doing this--that is, storing state in children, but sending it up to the parent upon request?