Setting Up a Basic TanStack Form

Initialize a simple TanStack Form, demonstrating how to define the form structure and handle form submission.

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

Import the useForm hook from the TanStack Form library.

function SimpleForm() {
  const {
    Form,
    values
  } = useForm({
    defaultValues: {
      firstName: '',
      lastName: ''
    }
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    // Handle form submission logic such as sending values to an API
    console.log(values);
  };

  return (
    <Form onSubmit={handleSubmit}>
      <label htmlFor="firstName">First Name:</label>
      <input
        id="firstName"
        {...Form.getInputProps('firstName')}
      />
      <label htmlFor="lastName">Last Name:</label>
      <input
        id="lastName"
        {...Form.getInputProps('lastName')}
      />
      <button type="submit">Submit</button>
    </Form>
  );
}

Defines a simple form component using TanStack Form. It initializes the form with default values for first and last name, handles form submission, and renders input fields for user input.