ℹ️ Select 'Choose Exercise', or randomize 'Next Random Exercise' in selected language.

Choose Exercise:
Timer 00:00
WPM --
Score --
Acc --
Correct chars --

Schema-Driven Form Field Generation

TSX

Goal -- WPM

Ready
Exercise Algorithm Area
1type FormFieldType = 'text' | 'number' | 'checkbox';

2

3type FormSchemaField = {

4name: string;

5label: string;

6type: FormFieldType;

7required?: boolean;

8placeholder?: string;

9};

10

11type FormSchema = FormSchemaField[];

12

13interface FormGeneratorProps {

14schema: FormSchema;

15formData: Record<string, any>;

16onChange: (name: string, value: any) => void;

17}

18

19function FormGenerator({ schema, formData, onChange }: FormGeneratorProps): JSX.Element {

20return (

21<form>

22{schema.map((field) => (

23<div key={field.name} style={{ marginBottom: '15px' }}>

24<label htmlFor={field.name}>{field.label}</label>

25{field.type === 'text' && (

26<input

27type="text"

28id={field.name}

29name={field.name}

30value={formData[field.name] || ''}

31onChange={(e) => onChange(field.name, e.target.value)}

32required={field.required}

33placeholder={field.placeholder}

34/>

35)}

36{field.type === 'number' && (

37<input

38type="number"

39id={field.name}

40name={field.name}

41value={formData[field.name] || 0}

42onChange={(e) => onChange(field.name, parseFloat(e.target.value))}

43required={field.required}

44placeholder={field.placeholder}

45/>

46)}

47{field.type === 'checkbox' && (

48<input

49type="checkbox"

50id={field.name}

51name={field.name}

52checked={!!formData[field.name]}

53onChange={(e) => onChange(field.name, e.target.checked)}

54required={field.required}

55/>

56)}

57</div>

58))}

59</form>

60);

61}
Algorithm description viewbox

Schema-Driven Form Field Generation

Algorithm description:

This component dynamically renders form elements based on a provided schema. It's a core pattern for building flexible and maintainable forms, allowing form structure to be defined in data rather than hardcoded JSX. This is invaluable for applications where forms need to adapt to different data structures or user roles.

Algorithm explanation:

The `FormGenerator` component receives a `schema` (an array of field definitions), `formData` (the current form state), and an `onChange` handler. It maps over the `schema` array. For each `field` definition, it creates a `div` containing a `label`. Based on the `field.type`, it renders the appropriate input element (`<input type='text'>`, `<input type='number'>`, or `<input type='checkbox'>`). It binds the input's `value` or `checked` attribute to the corresponding value in `formData` and uses the `onChange` prop to update the form state when user input changes. Validation attributes like `required` and `placeholder` are passed down directly. The `key` prop is used for efficient list rendering. The time complexity is O(n), where n is the number of fields in the schema, as each field is rendered once. The space complexity is O(1) beyond the props themselves, as it doesn't store significant internal state.

Pseudocode:

Define FormFieldType and FormSchema types.
Define FormGeneratorProps with schema, formData, and onChange.
Component FormGenerator(props):
  Render a form element.
  Map over props.schema:
    For each field:
      Render a div with a unique key.
      Render a label for the field.
      If field.type is 'text':
        Render an input of type 'text'.
        Bind value and onChange.
        Pass required and placeholder.
      Else if field.type is 'number':
        Render an input of type 'number'.
        Bind value and onChange (parsing to float).
        Pass required and placeholder.
      Else if field.type is 'checkbox':
        Render an input of type 'checkbox'.
        Bind checked and onChange (using e.target.checked).
        Pass required.