For the last couple of days, I didn’t write any blogs. It was because I was doing the same thing daily β€” forms.Β  So I thought, I should take a break from blogging and finish the forms first because there was no point in writing about the same stuff daily. It is still unfinished. But writing today’s piece is important as it has now been 30 days since I started this React initiative. πŸ₯‚

πŸ‘“ Day 28 – Joi

In my last piece, I talked about a validation library β€” Joi β€” that allows implementing form validation rules via simple built-in methods. How does it work? First, you need to define the schema. Schema is an object that contains the set of rules that you are planning to implement on your forms.

schema = {
title: Joi.string().required().label("Title"),
genre: Joi.string().required().label("Genre"),
noOfStock: Joi.number()
.max(100).label("Number in Stock"),
rate: Joi.number()

view raw
hosted with ❤ by GitHub

In the above schema, I have defined some rules that are going to implement on a form. Like for the title, I have set the standards that it must need to be a string, and also it is a required field. For the rate, I have defined rules like it should be a number, it is a required field, and it must need to be in between 0 and 100. 🚫

After defining the schema, you need to implement it using Joi.validate method. The first argument you need to pass through this method is your data that needs validation. The second argument is your schema. And for the third argument, it’s your choice whether to pass it or not. This argument set the early abort to false.

validate = () => {
const options = { abortEarly: false };
const { error } = Joi.validate(, this.schema, options);
if (!error) return null;
const errors = {};
for (let item of error.details) errors[item.path[0]] = item.message;
return errors;

view raw
hosted with ❤ by GitHub

πŸ“¦ There are also many other things that you need to do if you are using Joi for validation. I am not planning to discuss everything here, but if you want to take a look at my code, click here.

πŸ“ƒ Day 29 – registration form

Yesterday, after completing the login form, I started working on the registration form. When I was creating the login form, I built many reusable components. So now when I was creating the registration form, I used those reusable components which saved a lot of time. The power of ReactJS. πŸ’ͺ

registration from - msaaddev

πŸš€ Here is the code of this form. It’s not complete as it’s using other reusable components.

import React from "react";
import Joi from "joi-browser";
import Form from "./common/form";
class RegistrationForm extends Form {
state = {
data: { username: "", password: "", nameOfUser: "" },
errors: {}
schema = {
username: Joi.string()
password: Joi.string()
nameOfUser: Joi.string()
doSubmit = () => {
// Call the server
render() {
return (
<form onSubmit={this.handleSubmit}>
{this.renderInput("username", "Username")}
{this.renderInput("password", "Password", "password")}
{this.renderInput("nameOfUser", "Name")}
export default RegistrationForm;

view raw
hosted with ❤ by GitHub

🎬 Day 30 – New Movie

Today, I started my day by creating a new component β€” MovieForm. It is still incomplete. I have only created the interface of the component and set the validations for now. There is still work to be done on this component. After it’s complete, my Vidly app will be able to add new movies and edit the existing one. πŸ’―

new movie form - msaaddev

I have spent more than 6 hours today on practicing forms in React. And now I am done for the day. Cheerios. 🀞