Imagine we have a JSON structure describing a form. It has the type of the inputs (ex. { type: "textfield", name: "textfield-1" }), validation rules for each input (ex. { required: true, minLength: 3, maxLength: 10 }) and an observer attribute with rules of its own (ex. { name: "textfield-2", event: "onBlur", rules?: { ... } }). The observer attribute means that on the specified event on the specified name field it needs to run the rules and if they pass get the value from the specified field and auto-fill itself with that value (or do some other API call to get the value which is not important right now).
The problem: These inputs are created using a switch(input.type) { ... } that returns JSX. I have to find a way to communicate the value of each component specified to an event handler (like onBlur) to the other components (maybe 3-4 inputs can be prefilled using the first input, like the ZIP code if you enter a city to the first field and vice-versa).
Notes: I am using react-hook-form and the inputs are inside a if that makes a difference for the solution. What I am trying to do worked fine when I wasn't doing the forms dynamically but that is not an option anymore.
TL;DR: Trying to create forms fields dynamically and make them change the values (pre-fill) of other inputs based on some rules.