Hello folks! welcome back to a new section of our tutorial on ReactJS. In this section of our tutorial on ReactJS, we will be studying about ReactJS Formik.
Formik is a third-party React form library. It gives basic form programming & validation. It is based on controlled component and greatly reduces the time needed to perform form programming. In this tutorial post, we will recreate the expense form using Formik library.
First, create a new React application, react-formik-app using Create React App or Rollup bundler by following instructions in Creating a React application tutorial.
Next, install the Formik library.
Formik is a third-party React form library. It gives basic form programming & validation. It is based on controlled component and greatly reduces the time needed to perform form programming. In this tutorial post, we will recreate the expense form using Formik library.
First, create a new React application, react-formik-app using Create React App or Rollup bundler by following instructions in Creating a React application tutorial.
Next, install the Formik library.
cd /go/to/workspace npm install formik --save
Next, open the application in your favorite editor.
Next, create an src folder beneath the root directory of the application.
Next, create a components folder under src folder.
Next, create a file, ExpenseForm.css under src folder to style the component.
Next, create an src folder beneath the root directory of the application.
Next, create a components folder under src folder.
Next, create a file, ExpenseForm.css under src folder to style the component.
input[type=text], input[type=number], input[type=date], select { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input[type=submit] { width: 100%; background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } input[type=submit]:hover { background-color: #45a049; } input:focus { border: 1px solid #d9d5e0; } #expenseForm div { border-radius: 5px; background-color: #f2f2f2; padding: 20px; } #expenseForm span { color: red; }
Next, create a file, ExpenseForm.js beneath src/components folder and start editing.
Next import React and Formik library.
Next import React and Formik library.
import React from 'react';
import { Formik } from 'formik';
Next, import ExpenseForm.css file.
import './ExpenseForm.css'
Next, create an ExpenseForm class.
class ExpenseForm extends React.Component {
constructor(props) {
super(props);
}
}
Next, set initial values of the expense item in the constructor.
this.initialValues = { name: '', amount: '', date: '', category: '' }
Next, create a validation method. Formik is going to send the current values entered by the user.
validate = (values) => { const errors = {}; if (!values.name) { errors.name = 'Required'; } if (!values.amount) { errors.amount = 'Required'; } if (!values.date) { errors.date = 'Required'; } if (!values.category) { errors.category = 'Required'; } return errors; }
Next, create a method to submit the form. Formik will send the current values entered by the user.
handleSubmit = (values, setSubmitting) => { setTimeout(() => { alert(JSON.stringify(values, null, 2)); setSubmitting(false); }, 400); }
Next, create a render() method. Make use of handleChange, handleBlur and handleSubmit methods given by Formik as input elements event handler.
render() { return ( <div id="expenseForm"> <Formik initialValues={this.initialValues} validate={values => this.validate(values)} onSubmit={(values, { setSubmitting }) => this.handleSubmit(values, setSubmitting)} > { ({ values, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting, /* and other goodies */ }) => ( <form onSubmit={handleSubmit}> <label for="name">Title <span>{errors.name && touched.name && errors.name}</span></label> <input type="text" id="name" name="name" placeholder="Enter expense title" onChange={handleChange} onBlur={handleBlur} value={values.name} /> <label for="amount">Amount <span>{errors.amount && touched.amount && errors.amount}</span></label> <input type="number" id="amount" name="amount" placeholder="Enter expense amount" onChange={handleChange} onBlur={handleBlur} value={values.amount} /> <label for="date">Spend Date <span>{errors.date && touched.date && errors.date}</span></label> <input type="date" id="date" name="date" placeholder="Enter date" onChange={handleChange} onBlur={handleBlur} value={values.date} /> <label for="category">Category <span>{errors.category && touched.category && errors.category}</span></label> <select id="category" name="category" onChange={handleChange} onBlur={handleBlur} value={values.category}> <option value="">Select</option> <option value="Food">Food</option> <option value="Entertainment">Entertainment</option> <option value="Academic">Academic</option> </select> <input type="submit" value="Submit" disabled={isSubmitting} /> </form> ) } </Formik> </div> ) }
Finally, export the component.
export default ExpenseForm
Following below is the complete code of the ExpenseForm component.
import React from 'react'; import './ExpenseForm.css' import { Formik } from 'formik'; class ExpenseFormik extends React.Component { constructor(props) { super(props); this.initialValues = { name: '', amount: '', date: '', category: '' } } validate = (values) => { const errors = {}; if (!values.name) { errors.name = 'Required'; } if (!values.amount) { errors.amount = 'Required'; } if (!values.date) { errors.date = 'Required'; } if (!values.category) { errors.category = 'Required'; } return errors; } handleSubmit = (values, setSubmitting) => { setTimeout(() => { alert(JSON.stringify(values, null, 2)); setSubmitting(false); }, 400); } render() { return ( <div id="expenseForm"> <Formik initialValues={this.initialValues} validate={values => this.validate(values)} onSubmit={(values, { setSubmitting }) => this.handleSubmit(values, setSubmitting)} > { ({ values, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting, /* and other goodies */ }) => ( <form onSubmit={handleSubmit}> <label for="name">Title <span>{errors.name && touched.name && errors.name}</span></label> <input type="text" id="name" name="name" placeholder="Enter expense title" onChange={handleChange} onBlur={handleBlur} value={values.name} /> <label for="amount">Amount <span>{errors.amount && touched.amount && errors.amount}</span></label> <input type="number" id="amount" name="amount" placeholder="Enter expense amount" onChange={handleChange} onBlur={handleBlur} value={values.amount} /> <label for="date">Spend Date <span>{errors.date && touched.date && errors.date}</span></label> <input type="date" id="date" name="date" placeholder="Enter date" onChange={handleChange} onBlur={handleBlur} value={values.date} /> <label for="category">Category <span>{errors.category && touched.category && errors.category}</span></label> <select id="category" name="category" onChange={handleChange} onBlur={handleBlur} value={values.category}> <option value="">Select</option> <option value="Food">Food</option> <option value="Entertainment">Entertainment</option> <option value="Academic">Academic</option> </select> <input type="submit" value="Submit" disabled={isSubmitting} /> </form> ) } </Formik> </div> ) } } export default ExpenseForm;
Next, create a file, index.js beneath the src folder and use ExpenseForm component.
import React from 'react'; import ReactDOM from 'react-dom'; import ExpenseForm from './components/ExpenseForm' ReactDOM.render( <React.StrictMode> <ExpenseForm /> </React.StrictMode>, document.getElementById('root') );
Finally, create a public folder under the root folder and create index.html file.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>React App</title> </head> <body> <div id="root"></div> <script type="text/JavaScript" src="./index.js"></script> </body> </html>
Next, serve the application making use of npm command.
npm start
Next, open the web browser and then enter http://localhost:3000 in the address bar and press enter.
Finally, enter a sample expense details and click on submit. The submitted data will be collected and showed in a pop-up message box.
The interactive version of the form is given below.
READ: ReactJS | Material UI
Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial, we are going to be studying about ReactJS Routing.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.