Related components
How would you implement a <Form> and <ValidatedField> component?
Where e.g. you could force the validation of all nested ValidatedField components, and e.g. make the first one with errors focused?
What is the recommended way to implement such relations between components? How can components "know about each other", especially about their parent? Is this always implemented by using context and props? For example can I pass a "parent component context object" to the nested components where they can register themselves dynamically?
Thanks.
2 Replies
- Modular Forms exists.
https://discord.com/channels/722131463138705510/1100520819207184475
- https://www.solidjs.com/examples/forms is an old "vanilla" example of form validation with just the browser APIs. Here is a TS version https://stackblitz.com/edit/stackblitz-starters-nlchtj?file=src%2Fvalidation.tsx
With that out of the way, you can pass whatever you want from the container to the nested components via
props; something as simple as a callback function or some sort of “service object” which acts as the context for the collaborating components (not a context in the Solid sense).
At the core the container component could own a store for all the error messages that the nested components dump their error messages into (similar to above's useForm).SolidJS
Solid is a purely reactive library. It was designed from the ground up with a reactive core. It's influenced by reactive principles developed by previous libraries.
Thanks a lot! 🙏
I should learn more from existing code 🥹