Working with form data in React can be approached in several ways, depending on the complexity of the form and the specific requirements of your application. Here are some common methods:
1. Controlled Components
In controlled components, form data is handled by the React component’s state. This is the most common method for managing form data in React.
Example
jsximport React, { useState } from 'react';
const ControlledForm = () => {
const [formData, setFormData] = useState({
name: '',
email: '',
});
const handleChange = (e) => {
const { name, value } = e.target;
setFormData((prevData) => ({
...prevData,
[name]: value,
}));
};
const handleSubmit = (e) => {
e.preventDefault();
console.log(formData);
};
return (
<form onSubmit={handleSubmit}>
<div>
<label>Name:</label>
<input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
/>
</div>
<div>
<label>Email:</label>
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
/>
</div>
<button type="submit">Submit</button>
</form>
);
};
export default ControlledForm;
2. Uncontrolled Components with Refs
Uncontrolled components store form data in the DOM itself and use refs to access the data. This approach is useful for simple forms or when integrating with non-React libraries.
Example
jsximport React, { useRef } from 'react';
const UncontrolledForm = () => {
const nameRef = useRef();
const emailRef = useRef();
const handleSubmit = (e) => {
e.preventDefault();
console.log({
name: nameRef.current.value,
email: emailRef.current.value,
});
};
return (
<form onSubmit={handleSubmit}>
<div>
<label>Name:</label>
<input type="text" ref={nameRef} />
</div>
<div>
<label>Email:</label>
<input type="email" ref={emailRef} />
</div>
<button type="submit">Submit</button>
</form>
);
};
export default UncontrolledForm;
3. Using Form Libraries
Form libraries like Formik and React Hook Form can simplify form management by handling validation, state, and submission more efficiently.
Formik Example
jsximport React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';
const SignupForm = () => {
return (
<Formik
initialValues={{ name: '', email: '' }}
validationSchema={Yup.object({
name: Yup.string().required('Required'),
email: Yup.string().email('Invalid email address').required('Required'),
})}
onSubmit={(values, { setSubmitting }) => {
console.log(values);
setSubmitting(false);
}}
>
<Form>
<div>
<label htmlFor="name">Name:</label>
<Field name="name" type="text" />
<ErrorMessage name="name" component="div" />
</div>
<div>
<label htmlFor="email">Email:</label>
<Field name="email" type="email" />
<ErrorMessage name="email" component="div" />
</div>
<button type="submit">Submit</button>
</Form>
</Formik>
);
};
export default SignupForm;
React Hook Form Example
jsximport React from 'react';
import { useForm } from 'react-hook-form';
const HookForm = () => {
const { register, handleSubmit, formState: { errors } } = useForm();
const onSubmit = (data) => {
console.log(data);
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<div>
<label>Name:</label>
<input {...register('name', { required: 'Name is required' })} />
{errors.name && <span>{errors.name.message}</span>}
</div>
<div>
<label>Email:</label>
<input {...register('email', { required: 'Email is required', pattern: { value: /^\S+@\S+$/i, message: 'Invalid email address' } })} />
{errors.email && <span>{errors.email.message}</span>}
</div>
<button type="submit">Submit</button>
</form>
);
};
export default HookForm;
4. Custom Hooks
For more complex forms, you can create custom hooks to manage form state and validation logic.
Example
jsximport React, { useState } from 'react';
const useForm = (initialValues) => {
const [values, setValues] = useState(initialValues);
const handleChange = (e) => {
const { name, value } = e.target;
setValues((prevValues) => ({
...prevValues,
[name]: value,
}));
};
const resetForm = () => {
setValues(initialValues);
};
return [values, handleChange, resetForm];
};
const CustomHookForm = () => {
const [formData, handleChange, resetForm] = useForm({ name: '', email: '' });
const handleSubmit = (e) => {
e.preventDefault();
console.log(formData);
resetForm();
};
return (
<form onSubmit={handleSubmit}>
<div>
<label>Name:</label>
<input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
/>
</div>
<div>
<label>Email:</label>
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
/>
</div>
<button type="submit">Submit</button>
</form>
);
};
export default CustomHookForm;
Summary
- Controlled Components: Use when you want React to manage form state.
- Uncontrolled Components: Use when you prefer to keep form data in the DOM and access it with refs.
- Form Libraries (Formik, React Hook Form): Use for complex forms that require robust validation and state management.
- Custom Hooks: Use for custom form logic and state management.
