React + Formik - Combined Add/Edit (Create/Update) Form Example
Tutorial built with React 16.13.1 and Formik 2.1.4
Other versions available:
- React: React Hook Form
- Angular: Angular 14, 10
- Next.js: Next.js
This is a quick example of how to build a form in React with the Formik library that supports both create and update modes. The form in the example is for creating and updating user data, but the same pattern could be used to build an add/edit form for any type of data.
The below components are part of a React CRUD example app I posted recently that includes a live demo, so to see the below code running check out React + Formik - Master Details CRUD Example.
Formik Add/Edit Component
The AddEdit component is used for adding and editing users, the initial values of each field are set in the initialValues property, validation rules and error messages are set in the validationSchema property, and the onSubmit function gets called when the form is submitted and valid. The html and jsx markup for the form returned by the callback function contained within the <Formik>...</Formik> component tag.
The form is in "add mode" when there is no user id parameter in the route (match.params.id), otherwise it is in "edit mode". The variable isAddMode is used to change the form behaviour based on the mode it is in, for example in "add mode" the password field is required, and in "edit mode" (!isAddMode) the user service is called to get the user details and set the field values.
import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { Formik, Field, Form, ErrorMessage } from 'formik';
import * as Yup from 'yup';
import { userService, alertService } from '@/_services';
function AddEdit({ history, match }) {
const { id } = match.params;
const isAddMode = !id;
const initialValues = {
title: '',
firstName: '',
lastName: '',
email: '',
role: '',
password: '',
confirmPassword: ''
};
const validationSchema = Yup.object().shape({
title: Yup.string()
.required('Title is required'),
firstName: Yup.string()
.required('First Name is required'),
lastName: Yup.string()
.required('Last Name is required'),
email: Yup.string()
.email('Email is invalid')
.required('Email is required'),
role: Yup.string()
.required('Role is required'),
password: Yup.string()
.concat(isAddMode ? Yup.string().required('Password is required') : null)
.min(6, 'Password must be at least 6 characters'),
confirmPassword: Yup.string()
.when('password', (password, schema) => {
if (password || isAddMode) return schema.required('Confirm Password is required');
})
.oneOf([Yup.ref('password')], 'Passwords must match')
});
function onSubmit(fields, { setStatus, setSubmitting }) {
setStatus();
if (isAddMode) {
createUser(fields, setSubmitting);
} else {
updateUser(id, fields, setSubmitting);
}
}
function createUser(fields, setSubmitting) {
userService.create(fields)
.then(() => {
alertService.success('User added', { keepAfterRouteChange: true });
history.push('.');
})
.catch(() => {
setSubmitting(false);
alertService.error(error);
});
}
function updateUser(id, fields, setSubmitting) {
userService.update(id, fields)
.then(() => {
alertService.success('User updated', { keepAfterRouteChange: true });
history.push('..');
})
.catch(error => {
setSubmitting(false);
alertService.error(error);
});
}
return (
<Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={onSubmit}>
{({ errors, touched, isSubmitting, setFieldValue }) => {
const [user, setUser] = useState({});
const [showPassword, setShowPassword] = useState(false);
useEffect(() => {
if (!isAddMode) {
// get user and set form fields
userService.getById(id).then(user => {
const fields = ['title', 'firstName', 'lastName', 'email', 'role'];
fields.forEach(field => setFieldValue(field, user[field], false));
setUser(user);
});
}
}, []);
return (
<Form>
<h1>{isAddMode ? 'Add User' : 'Edit User'}</h1>
<div className="form-row">
<div className="form-group col">
<label>Title</label>
<Field name="title" as="select" className={'form-control' + (errors.title && touched.title ? ' is-invalid' : '')}>
<option value=""></option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Miss">Miss</option>
<option value="Ms">Ms</option>
</Field>
<ErrorMessage name="title" component="div" className="invalid-feedback" />
</div>
<div className="form-group col-5">
<label>First Name</label>
<Field name="firstName" type="text" className={'form-control' + (errors.firstName && touched.firstName ? ' is-invalid' : '')} />
<ErrorMessage name="firstName" component="div" className="invalid-feedback" />
</div>
<div className="form-group col-5">
<label>Last Name</label>
<Field name="lastName" type="text" className={'form-control' + (errors.lastName && touched.lastName ? ' is-invalid' : '')} />
<ErrorMessage name="lastName" component="div" className="invalid-feedback" />
</div>
</div>
<div className="form-row">
<div className="form-group col-7">
<label>Email</label>
<Field name="email" type="text" className={'form-control' + (errors.email && touched.email ? ' is-invalid' : '')} />
<ErrorMessage name="email" component="div" className="invalid-feedback" />
</div>
<div className="form-group col">
<label>Role</label>
<Field name="role" as="select" className={'form-control' + (errors.role && touched.role ? ' is-invalid' : '')}>
<option value=""></option>
<option value="User">User</option>
<option value="Admin">Admin</option>
</Field>
<ErrorMessage name="role" component="div" className="invalid-feedback" />
</div>
</div>
{!isAddMode &&
<div>
<h3 className="pt-3">Change Password</h3>
<p>Leave blank to keep the same password</p>
</div>
}
<div className="form-row">
<div className="form-group col">
<label>
Password
{!isAddMode &&
(!showPassword
? <span> - <a onClick={() => setShowPassword(!showPassword)} className="text-primary">Show</a></span>
: <span> - {user.password}</span>
)
}
</label>
<Field name="password" type="password" className={'form-control' + (errors.password && touched.password ? ' is-invalid' : '')} />
<ErrorMessage name="password" component="div" className="invalid-feedback" />
</div>
<div className="form-group col">
<label>Confirm Password</label>
<Field name="confirmPassword" type="password" className={'form-control' + (errors.confirmPassword && touched.confirmPassword ? ' is-invalid' : '')} />
<ErrorMessage name="confirmPassword" component="div" className="invalid-feedback" />
</div>
</div>
<div className="form-group">
<button type="submit" disabled={isSubmitting} className="btn btn-primary">
{isSubmitting && <span className="spinner-border spinner-border-sm mr-1"></span>}
Save
</button>
<Link to={isAddMode ? '.' : '..'} className="btn btn-link">Cancel</Link>
</div>
</Form>
);
}}
</Formik>
);
}
export { AddEdit };
User Routes Component
The Users component defines routes for each of the pages within the users section.
The second and third routes are for adding and editing users, they match different routes but both load the above AddEdit component which modifies its behaviour based on the route.
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import { List } from './List';
import { AddEdit } from './AddEdit';
function Users({ match }) {
const { path } = match;
return (
<Switch>
<Route exact path={path} component={List} />
<Route path={`${path}/add`} component={AddEdit} />
<Route path={`${path}/edit/:id`} component={AddEdit} />
</Switch>
);
}
export { Users };
Need Some React Help?
Search fiverr for freelance React developers.
Follow me for updates
When I'm not coding...
Me and Tina are on a motorcycle adventure around Australia.
Come along for the ride!