Building Forms with React: A Step-by-Step Guide
React does not provide a default way of handling forms, which can make it challenging to manage form data and validation. In this article, we will explore how to build forms with React using controlled components and the popular Formik library.
Understanding Controlled Components
In React, a controlled component is a component that manages its own state and updates its value in response to user input. To create a controlled component, you need to set up an event handler to update the state when the user interacts with the form field.
Here’s an example of a simple controlled component:
“`jsx
class MyForm extends React.Component {
constructor(props) {
super(props);
this.state = { inputValue: ” };
}
handleChange(event) {
this.setState({ inputValue: event.target.value });
}
render() {
return (
);
}
}
“`
Using Formik to Simplify Form Building
Formik is a popular library that provides a simple and elegant way to build forms with React. It eliminates the need for boilerplate code and provides a robust set of features for managing form data and validation.
To use Formik, you need to wrap your form component with the withFormik higher-order component (HOC). The HOC provides a set of props that you can use to manage form data and validation.
Here’s an example of a simple form built with Formik:
“`jsx
import { withFormik } from ‘formik’;
const MyForm = ({ values, handleChange, handleSubmit }) => (
);
const FormikApp = withFormik({
mapPropsToValues: () => ({ fullName: ” }),
handleSubmit: (values, { setSubmitting }) => {
console.log(values);
setSubmitting(false);
},
})(MyForm);
“`
Validating Forms with Yup
Yup is a popular library for validating JavaScript objects. It provides a simple and elegant way to define validation rules for your form data.
To use Yup with Formik, you need to pass a validationSchema prop to the withFormik HOC. The validationSchema prop should contain a Yup schema that defines the validation rules for your form data.
Here’s an example of a form with validation built with Formik and Yup:
“`jsx
import { withFormik } from ‘formik’;
import * as Yup from ‘yup’;
const MyForm = ({ values, handleChange, handleSubmit, errors }) => (
{errors.fullName &&
}
);
const FormikApp = withFormik({
mapPropsToValues: () => ({ fullName: ” }),
validationSchema: Yup.object().shape({
fullName: Yup.string().required(‘Full name is required’),
}),
handleSubmit: (values, { setSubmitting }) => {
console.log(values);
setSubmitting(false);
},
})(MyForm);
“`
Conclusion
Building forms with React can be challenging, but with the right tools and techniques, it can be a breeze. In this article, we explored