Initializing a Basic TanStack Form in React

Demonstrates setting up a basic form using TanStack hooks in a React component, outlining the structure and initial state.

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

Imports React, useState hook for managing form state, and useForm from TanStack for handling form data.

function BasicForm() {
  const [formData, setFormData] = useState({ name: '', email: '' });

Defines a functional component and initializes form data state with name and email fields.

  const { Form, useField } = useForm({
    defaultValues: formData,
    onSubmit: async(values) => {
      console.log(values);
      // Submit form values
    },
  });

Uses useForm hook to handle the form lifecycle, including default values and submission logic.

  const nameField = useField('name');
  const emailField = useField('email');

Utilizes useField hook to manage individual form fields.

  return (
    <Form>
      <div>
        <label>Name:</label>
        <input {...nameField.getInputProps()} />
      </div>
      <div>
        <label>Email:</label>
        <input {...emailField.getInputProps()} />
      </div>
      <button type='submit'>Submit</button>
    </Form>
  );
}

Renders the form with input fields for name and email. It uses spread attributes to pass down input props.

export default BasicForm;

Exports the form component for use in other parts of the application.