Access form data in parent component without passing values

Reactjs question. I couldn't really find any solution to the problem or I'm not sure what to look for. I need a way to reuse a form in multiple places without duplicating event handlers (but form submit has to be triggered from different parent components). What is the best way to do it?

More context:

I've got a line item component that contains multiple form fields. Let's call it FormComponent. It's a functional component that uses useState to handle form field values and onChange event handlers.

The problem is that I include this form in 3 different scenarios.

1. as a single line item on the main page, submitted by a button

• 2a/ as a modal with multiple line items, submitted by a modal button outside of FormComponent
• 2b/ as another modal with multiple line items and saved/restored values, similar to case 2.

3. multiple line items, submitted by a button

Because of the different cases, I can't always include submit button in the form and get the values to send them to backend on form submit.

I'd like to have at least 3 layers of components: Different parents that submit data -> one FormComponent that controls values and event handlers -> one controlled component with form nodes (actual inputs) and styling

Question

What is the best way to split it into components without having to redefe and pass event handlers in all of the parents (parent for case 1, another parent for case 2 (modals), different parent for mulitple lineitems - case 3).

Is using react context the only way to achieve this? Is there a performance impact when updating input value in context after each key press?

https://stackoverflow.com/questions/66827401/access-form-data-in-parent-component-without-passing-values March 27, 2021 at 10:08AM