Zach Zach - 2 months ago 5
React JSX Question

How can I pass a prop down through all subcomponents without doing so explicitly?

I am using redux with react to manage the state of a complex form, which will be a single object. My form will have nested data structures which the user may edit, so for example : Applicant.Address.Country would be updated by a textbox on my form. I had the idea of making an action called UPDATE_MODEL where updates could be made by passing in objects like :

{Applicant: {Address: {Country: 'France'} } }

Which would get merged with the state by the reducer. The dispatch to update the model would need to be passed down to every single form field, as well as a prop for telling the component where it fits in the entire tree of the form. Do I have any alternatives to not passing down these two props throughout the form? It just sounds messy.


Yes, you do. You can use React context.