Design and implement a forms component using React.
Requirements:
- The component must accept a schema that defines both the data structure and the validation rules.
- It should be designed to be reusable and configurable, allowing integration across multiple teams.
- The component is intended to be part of a UI library, and thus should follow best practices for modularity, extensibility, and maintainability.
1 Like
I got this question as well. I got my solution working, but I don’t think I vibed well with the interviewer and he was a stickler.
const formSchema = {/**/}
function CustomForm = ({ formSchema, onSubmit }: { onSubmit: any, formSchema }) => {
const formKeys = Object.keys()
const onSubmit = React.useCallback((event) => {
//
}, [])
return (
<form onSubmit={onSubmit}>
// Build form from schema
// when handleSubmit is called, get the data in key value pairs and log it. Tip: use FormData api
</form >
)
}
There are many solutions, and i dont think it matters as long as its coherent. I came back to the problem and cleaned up my code.
My original solution during interview was simpler, and I recommend the simplest solution that will allow you to get something working for interview purposes.
Make sure to let interview know stuff like:
“hey i know there’s lots of stuff thats involved with forms (validation etc). For now, here’s my plan to get the form rendering. Then when this part is complete, i’d like tackle validation or code polish” interviews are usually receptive if you lead, stay calm and include them in your process
1 Like