State management for complex dynamic form
Hey Team,
I have a dynamic form but I'm not sure if my implementation is correct as it has become extremely nested and confusing. The first input is a dropdown select of Data Metric Functions for the user to choose from, depending on which they select, the rest of the inputs will be dynamically rendered.
So it can be a DMF with no params e.g: FRESHNESS(), in this case no other inputs will be rendered.
Or it can be a DMF with one table and one or more columns e.g: ACCEPTED_VALUES(TABLE(NUMBER)). In this case I want to render a dropdown for each column. In this example just one dropdown as there is only one column, NUMBER. However it can have any amount of columns e.g ACCEPTED_VALUES(TABLE(NUMBER, VARCHAR, DATE)) would need 3 dropdowns rendered. These columns must exist in the table, which is easy as the first table is already known as this is where we are applying the DMF.
Then it gets more complex: a third option renders column dropdowns for the first table, plus a dropdown to select a secondary table, plus column dropdowns for that secondary table. For example VARIANCE_CHECK(TABLE(DATE), TABLE(DATE)) with any amount of columns for either table. However the secondary table's column dropdowns cannot be rendered until the table name is selected as we don't know what to populate them with until that point.
I'll attach an image for context, though what I've built is incomplete, the secondary table input and its column inputs are currently text inputs rather than the intended dropdowns.
My main questions are: what would a high-level pseudocode implementation look like following TanStack Form best practices? Is a field array the right approach, or only appropriate for the column inputs? And how should I handle form state when the DMF selection changes, ensuring previously rendered fields are removed and new fields are initialised, so state always reflects only what is currently rendered?
Thanks, Avril
I have a dynamic form but I'm not sure if my implementation is correct as it has become extremely nested and confusing. The first input is a dropdown select of Data Metric Functions for the user to choose from, depending on which they select, the rest of the inputs will be dynamically rendered.
So it can be a DMF with no params e.g: FRESHNESS(), in this case no other inputs will be rendered.
Or it can be a DMF with one table and one or more columns e.g: ACCEPTED_VALUES(TABLE(NUMBER)). In this case I want to render a dropdown for each column. In this example just one dropdown as there is only one column, NUMBER. However it can have any amount of columns e.g ACCEPTED_VALUES(TABLE(NUMBER, VARCHAR, DATE)) would need 3 dropdowns rendered. These columns must exist in the table, which is easy as the first table is already known as this is where we are applying the DMF.
Then it gets more complex: a third option renders column dropdowns for the first table, plus a dropdown to select a secondary table, plus column dropdowns for that secondary table. For example VARIANCE_CHECK(TABLE(DATE), TABLE(DATE)) with any amount of columns for either table. However the secondary table's column dropdowns cannot be rendered until the table name is selected as we don't know what to populate them with until that point.
I'll attach an image for context, though what I've built is incomplete, the secondary table input and its column inputs are currently text inputs rather than the intended dropdowns.
My main questions are: what would a high-level pseudocode implementation look like following TanStack Form best practices? Is a field array the right approach, or only appropriate for the column inputs? And how should I handle form state when the DMF selection changes, ensuring previously rendered fields are removed and new fields are initialised, so state always reflects only what is currently rendered?
Thanks, Avril
