Initializing TanStack Form in a React Component

Demonstrate initializing TanStack Form within a React functional component, including setting up initial form values.

import React from 'react';
import { useForm } from '@tanstack/react-form';

Imports React and useForm hook from TanStack React Form library.

function MyFormComponent() {
  const form = useForm({
    defaultValues: {
      firstName: '',
      lastName: ''
    }
  });

Defines a functional component and initializes the form with useForm hook including default values for firstName and lastName.

return (
    <form onSubmit={form.handleSubmit((values) => {
      console.log(values);
    })}>
      <input {...form.register('firstName')} placeholder="First Name" />
      <input {...form.register('lastName')} placeholder="Last Name" />
      <button type="submit">Submit</button>
    </form>
  );
}

Renders a form element with inputs for firstName and lastName. The inputs are registered to the form state. A submit button triggers form submission, logging form values to the console.

export default MyFormComponent;

Exports the MyFormComponent for use in other parts of the application.