So let's get started.

Want to watch the video version of this tutorial? You can check out the video below:

Table Of Contents

• How You Usually Debug Node.js Applications
• How to Add a Debugger to Debug Your Code
• How to Run the Application for Debugging
• How to Access Variables During Debugging
• How to Create a Script to Debug Node.js Apps
• Quick Recap

How You Usually Debug Node.js Applications

If you want to debug a Node.js application, usually you add a console.log statement in the code that you want to debug to find out the value of any variable.

This works, but you need to keep checking the console log to see the value that you're trying to print.

And if the data printed in the console contains nested objects or if it's a lot of data, then using console.log is not feasible.

Fortunately, there's a better way.

How to Add a Debugger to Debug Your Code

Instead, you can add a debugger; statement in the code that you want to debug.

So let's say you have an Express.js API route for registering a user as shown in the below code:

// controllers/auth.js

const register = async (req, res) => {
  try {
    const { email, password } = req.body;
    const existingUser = await User.findOne({
      email,
    });
    if (existingUser) {
      return res.status(400).send('User with the provided email already exist');
    }
    // some more code
    return res.status(201).send();
  } catch (error) {
    console.log(error);
    return res
      .status(500)
      .send('Error while registering a new user. Try again later.');
  }
};

module.exports = { register };

// routes/auth.js
const { register } = require('../controllers/auth');

const Router = express.Router();

Router.post('/api/register', register);

And there's some issue while registering a user, so you want to debug the register function's code.

In that case, you can just add a debugger; statement inside the register function code like this:

const register = async (req, res) => {
  try {
    const { email, password } = req.body;
    debugger;
    const existingUser = await User.findOne({
      email,
    });
    if (existingUser) {
      return res.status(400).send('User with the provided email already exist');
    }
    // some more code
    return res.status(201).send();
  } catch (error) {
    console.log(error);
    return res
      .status(500)
      .send('Error while registering a new user. Try again later.');
  }
};

How to Run the Application for Debugging

Normally, you start your Node.js application by executing the following command:

node index.js

But instead, you can execute the following command:

node inspect index.js

Here, we just added an inspect keyword in between.

If your main application file's name is server.js, you can execute the node inspect server.js command.

Once you execute the above command, you will see the output displayed as shown below:

Debugger Attached

As you can see from the output, the debugger is attached, so now you can start debugging the code.

To do that, open the Chrome browser and enter chrome://inspect in the browser URL.

You will see the output as shown below:

Chrome Inspect Page

Since you executed the node inspect index.js command to start inspecting, you can see a new target entry displayed under the Remote Target section.

Now, if you click on the displayed blue inspect link, then you will see a new browser dev tool opened as shown below:

Debugger Paused

As you can see in the right panel in the above image, the Debugger paused message is displayed. The debugging control is at the first line of code, as you can see from the highlighted yellow line.

But you don't want to start debugging from the first line of code. Instead, you want to just debug the registration code. To do this, click on the blue triangle icon which is displayed just above the Debugger paused message as shown below:

Continuing Debugging

Now don't close this window – instead, try registering a user from the application or making an API call using Postman, so the /register route handler code that we added previously will be executed.

Registering User & Debugging Code

As you can see above, when you click on create new account button, you're automatically redirected to the code where you added the debugger; statement.

Now, you can debug the code line by line and see the values of each variable during debugging to find out and fix the issue.

How to Access Variables During Debugging

Sometimes when you mouse over any variable while debugging to see its actual value, the value might be too long (because it might be an object with many properties), so you can't see it easily by mousing over it.

In that case, while the debugger is still active, you can open the console tab and type the name of the variable whose value you want to see – as you can see in the below Gif:

Logging Variables In The Console

So that's how you can easily debug any of your Node.js application's code.

How to Create a Script to Debug Node.js Apps

If you don't want to manually type the node inspect index.js command every time in the terminal, you can create a new debug script inside the package.json file like this:

"scripts": {
    "start": "node index.js",
    "debug": "node inspect index.js",
    "dev": "nodemon index.js"
},

So now, you can execute the npm run debug command to start your application in debug mode.

Quick Recap

To debug a Node.js application, you need to follow the below steps:

• Add a debugger statement inside the code that you want to debug.
• Run the node inspect index.js or node inspect server.js command to start the application in debug mode.
• Access the URL chrome://inspect in your Chrome browser.
• Click on the inspect link under the Remote Target section.
• Click on the blue triangle icon to skip debugging if you don't want to start debugging your application from the first line of the index.js or server.js file.
• Make an API call or do something that will trigger the code where you added the debugger; statement. This way you can debug the code line by line and find out the issue.

Thanks for Reading

That's it for this tutorial. I hope you learned something new.

Want to watch the video version of this tutorial? You can check out this video.

If you want to master JavaScript, ES6+, React, and Node.js with easy-to-understand content, check out my YouTube channel. Don't forget to subscribe.

Want to stay up to date with regular content on JavaScript, React, and Node.js? Follow me on LinkedIn.

By the end, you will have a solid understanding of how to write React code with TypeScript.

Want to watch the video version of this tutorial? You can check out the video below:

Table of Contents

• Prerequisites
• Getting Started
• React and TypeScript Basics
• Three Ways of Defining Prop Types
• How to Create a Random Users List Application
• How to Store the Users List in State
• How to Display the Users on the UI
• How to Create a Separate User Component
• How to Create a Separate File for Type Declarations
• How to Display a Loading Indicator
• How to Load Users on Button Click
• How to Handle the Change Event
• Thanks for Reading

Prerequisites

To follow along with this tutorial, here's what you should have:

• a basic knowledge of how to work with React
• a basic understanding of writing TypeScript code

Getting Started

To get started with TypeScript, you first need to install TypeScript on your machine. You can do this by executing npm install -g typescript from the terminal or command prompt.

Now, we will create a Vite project using TypeScript.

npm create vite

Once executed, you will be asked some questions.

For the project name, enter react-typescript-demo.

For framework, select React, and for variant select TypeScript.

Create Project Using Vite

Once you've created the project, open it in VS Code and execute the following commands from the terminal:

cd react-typescript-demo
npm install

Now, let's do some code cleanup.

Remove the src/App.css file and replace the content of src/App.tsx file with the following content:

const App = () => {
  return <div>App</div>;
};

export default App;

After saving the file, you might see the red underlines in the file as shown below:

TypeScript Version Error

If you get that error, just press Cmd + Shift + P(Mac) or Ctrl + Shift + P(Windows/Linux) to open the VS Code command palette and enter TypeScript text in the search box and select the option TypeScript: Select TypeScript Version...:

VSCode Command Palette Options

Once selected, you will see options to select between the VS Code version and the workspace version as shown below:

Select Use Workspace Version

From these options, you need to select Use Workspace Version option. Once you select that option, the error from the App.tsx file will be gone.

Now, open the src/index.css file and replace its contents with the following code:

:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

Now, let's start the application by executing the npm run dev command.

Application Started

Now, click on the displayed URL and access the application. You will see the following initial screen with text App displayed in the browser.

Running Application

React and TypeScript Basics

When using React with TypeScript, the first thing you should know is the file extension.

Every React + TypeScript file needs to have a .tsx extension.

If the file does not contain any JSX-specific code, then you can use the .ts extension instead of the .tsx extension.

To create a component in React with TypeScript, you can use the FC type from the react package and use it after the component name.

So open the src/App.tsx file and replace it with the following contents:

import { FC } from 'react';

const App: FC = () => {
  return <div>App</div>;
};

export default App;

Now, let's pass some props to this App component.

Open src/main.tsx and pass a title prop to the App component as shown below:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App title='TypeScript Demo' />
  </React.StrictMode>
);

However, with the added title prop, we now have a TypeScript error as you can see below:

Prop Error

Three Ways of Defining Prop Types

We can fix the above TypeScript error in three different ways.

• Declaring Types Using Interface

The error is coming because we have added a title prop as a mandatory prop for the App component – so we need to mention this inside the App component.

Open the src/App.tsx file and replace its contents with the following code:

import { FC } from 'react';

interface AppProps {
  title: string;
}

const App: FC<AppProps> = () => {
  return <div>App</div>;
};

export default App;

As you can see above, we have added an extra interface AppProps to specify which props the component is accepting. We also used the AppProps interface after the FC in angle brackets.

It's a good practice and recommended to start the interface name with a capital letter like AppProps in our case.

Now, with this change, the TypeScript error will be gone as you can see below:

Adding Prop Types To Component

This is how we specify what props a particular component accepts.

• Declaring Types Using type

We can also declare the props type using type keyword.

So open the App.tsx file and change the below code:

import { FC } from 'react';

interface AppProps {
  title: string;
}

const App: FC<AppProps> = () => {
  return <div>App</div>;
};

export default App;

to this code:

import { FC } from 'react';

type AppProps = {
  title: string;
};

const App: FC<AppProps> = () => {
  return <div>App</div>;
};

export default App;

Here, instead of the interface declaration, we used the type declaration. Now the code will work without any TypeScript error.

It's up to you which one you use. I always like to use an interface for declaring component types.

• Using Inline Type Declaration

The third way of declaring a type is by defining inline types as shown below:

const App = ({ title }: { title: string }) => {
  return <div>App</div>;
};

export default App;

As you can see above, we have removed the use of FC as it's not needed, and while destructuring the title prop we defined the type of it.

So out of these three ways, you can use whichever way you want. I always prefer to use an interface with FC. That way, if I want to add more props later, the code will not look complicated (which will happen if you define inline types).

Now, let's use the title prop and display it on the UI.

Replace the contents of the App.tsx file with the following code:

import { FC } from 'react';

interface AppProps {
  title: string;
}

const App: FC<AppProps> = ({ title }) => {
  return <h1>{title}</h1>;
};

export default App;

As you can see, we're using an interface with FC, and we're destructuring the title prop and displaying it on the screen.

Now, open the src/index.css file and add the following CSS inside it:

h1 {
  text-align: center;
}

If you check the application in the browser, you will see that the title with text TypeScript Demo is correctly getting displayed.

Application Title Displayed Correctly

How to Create a Random Users List Application

Now that you have a basic idea of how to declare component props, let's create a simple Random Users List Application that will display a list of 10 random users on the screen.

For that, we will be using the Random User Generator API.

This is the API URL we will be using:

https://randomuser.me/api/?results=10

Let's first install the Axios npm library so we can make an API call using it.

Execute the following command to install the Axios library:

npm install axios

Once installed, restart the application by executing the npm run dev command.

Now, replace the contents of the App.tsx file with the following content:

import axios from 'axios';
import { FC, useEffect } from 'react';

interface AppProps {
  title: string;
}

const App: FC<AppProps> = ({ title }) => {
  useEffect(() => {
    const getUsers = async () => {
      try {
        const { data } = await axios.get(
          'https://randomuser.me/api/?results=10'
        );
        console.log(data);
      } catch (error) {
        console.log(error);
      }
    };
    getUsers();
  }, []);

  return <h1>{title}</h1>;
};

export default App;

As you can see above, we have added a useEffect hook where we're making the API call to get the the list of users.

Now, if you open the console in the browser, you will be able to see the API response displayed in the console.

API Response

As you can see, we're correctly getting a list of 10 random users and the actual users list is coming in the results property of the response.

How to Store the Users List in State

Now, let's store those users in the state so we can display them on the screen.

Inside the App component, declare a new state with an initial value of an empty array like this:

const [users, setUsers ] = useState([]);

And call the setUsers function to store the users in the useEffect hook after the API call.

So your App component will look like this now:

import axios from 'axios';
import { FC, useEffect, useState } from 'react';

interface AppProps {
  title: string;
}

const App: FC<AppProps> = ({ title }) => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const getUsers = async () => {
      try {
        const { data } = await axios.get(
          'https://randomuser.me/api/?results=10'
        );
        console.log(data);
        setUsers(data.results);
      } catch (error) {
        console.log(error);
      }
    };
    getUsers();
  }, []);

  return <h1>{title}</h1>;
};

export default App;

As you can see here, we're calling the setUsers function with the value of data.results.

How to Display the Users on the UI

Now, let's display the name and email of the individual user on the screen.

If you check the console output, you can see that there is a name property for each object that contains the first and last name of the user. So we can combine them to display the complete name.

Also, we have a direct email property for each user object which we can use to display the email.

Exploring API Response

So replace the contents of the App.tsx file with the following content:

import axios from 'axios';
import { FC, useEffect, useState } from 'react';

interface AppProps {
  title: string;
}

const App: FC<AppProps> = ({ title }) => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const getUsers = async () => {
      try {
        const { data } = await axios.get(
          'https://randomuser.me/api/?results=10'
        );
        console.log(data);
        setUsers(data.results);
      } catch (error) {
        console.log(error);
      }
    };
    getUsers();
  }, []);

  return (
    <div>
      <h1>{title}</h1>
      <ul>
        {users.map(({ login, name, email }) => {
          return (
            <li key={login.uuid}>
              <div>
                Name: {name.first} {name.last}
              </div>
              <div>Email: {email}</div>
              <hr />
            </li>
          );
        })}
      </ul>
    </div>
  );
};

export default App;

As you can see, we're using the array map method to loop over the users array, and we're using object destructuring to destructure the login, name, and email properties of individual user objects. Also, we're displaying the name and email of the user as an un-ordered list.

But you will see some TypeScript errors in the file, as can be seen below:

User Properties TypeScript Error

This is because, as you can see above, by default TypeScript assumes the type of users array to be never[] – so it's not able to find out which properties the users array contains.

This means that we need to specify all of the properties that we're using along with their types.

So now, declare a new interface after the AppProps interface like this:

interface Users {
  name: {
    first: string;
    last: string;
  };
  login: {
    uuid: string;
  };
  email: string;
}

Here, we're specifying that each individual user will be an object with name, login, and email properties. We're also specifying the data type of each property.

As you can see, each user object coming from the API has a lot of other properties like phone, location and others. But we only need to specify those properties that we're using in the code.

Now, change the useState users array declaration from this:

const [users, setUsers] = useState([]);

to this:

const [users, setUsers] = useState<Users[]>([]);

Here, we're specifying that users is an array of objects of type Users which is the interface we declared.

Now, if you check the App.tsx file, you will see that there are no TypeScript errors.

Fixed Property Types Error

And you will be able to see the list of 10 random users displayed on the screen:

List Of Random Users Displayed On Screen

As you have seen previously, we have declared the Users interface like this:

interface Users {
  name: {
    first: string;
    last: string;
  };
  login: {
    uuid: string;
  };
  email: string;
}

But when you have nested properties, you will see it written like this:

interface Name {
  first: string;
  last: string;
}

interface Login {
  uuid: string;
}

interface Users {
  name: Name;
  login: Login;
  email: string;
}

The advantage of declaring separate interfaces for each nested property is that, if you want to use the same structure in any other file, you can just export any of the above interfaces and re-use them other files (instead of re-declaring the same interface again).

So let's export all of the above interfaces as a named export. So the code will look like this:

export interface Name {
  first: string;
  last: string;
}

export interface Login {
  uuid: string;
}

export interface Users {
  name: Name;
  login: Login;
  email: string;
}

As I said previously, you can also use type declaration here instead of using the interface, so it will look like this:

type Name = {
  first: string;
  last: string;
};

type Login = {
  uuid: string;
};

type Users = {
  name: Name;
  login: Login;
  email: string;
};

How to Create a Separate User Component

When we're using an array map method to display something on the screen, it's common to separate out that display part in a different component. This makes it easy to test, and it will also make your component code shorter.

Create a components folder inside the src folder and create a User.tsx file inside it. Then add the following contents inside that file:

const User = ({ login, name, email }) => {
  return (
    <li key={login.uuid}>
      <div>
        Name: {name.first} {name.last}
      </div>
      <div>Email: {email}</div>
      <hr />
    </li>
  );
};

export default User;

If you save the file, you will see the TypeScript errors again.

User Component Props Declaration Error

So again, we need to specify which props the User component will be receiving. We also need to specify the data type of each of them.

So the updated User.tsx file will look like this:

import { FC } from 'react';
import { Login, Name } from '../App';

interface UserProps {
  login: Login;
  name: Name;
  email: string;
}

const User: FC<UserProps> = ({ login, name, email }) => {
  return (
    <li key={login.uuid}>
      <div>
        Name: {name.first} {name.last}
      </div>
      <div>Email: {email}</div>
      <hr />
    </li>
  );
};

export default User;

As you can see above, we have declared a UserProps interface above and we have specified it for the User component using FC.

Also, note that we're not declaring the data type of the name and login properties. Instead we're using the exported types from the App.tsx file:

import { Login, Name } from '../App';

That's why it's good to declare separate types for each nested property, so we can reuse them elsewhere.

Now, we can use this User component inside the App.tsx file.

So change the below code:

{users.map(({ login, name, email }) => {
  return (
    <li key={login.uuid}>
      <div>
        Name: {name.first} {name.last}
      </div>
      <div>Email: {email}</div>
      <hr />
    </li>
  );
})}

to this code:

{users.map(({ login, name, email }) => {
  return <User key={login.uuid} name={name} email={email} />;
})}

As you might know, when using the array map method, we need to provide the key for the parent element which is User in our case. So we have added the key prop while using the User component as shown above.

That means we don't need a key inside the User component, so we can remove the key and login prop from the User component.

So the updated User component will look like this:

import { FC } from 'react';
import { Name } from '../App';

interface UserProps {
  name: Name;
  email: string;
}

const User: FC<UserProps> = ({ name, email }) => {
  return (
    <li>
      <div>
        Name: {name.first} {name.last}
      </div>
      <div>Email: {email}</div>
      <hr />
    </li>
  );
};

export default User;

As you can see, we have removed the login prop from the interface while also destructuring it. The application is still working as before without any issues, as you can see below.

List Of Random Users Displayed On UI

How to Create a Separate File for Type Declarations

As you can see, the App.tsx file has become quite large because of the interface declarations. It's common to have a separate file just for declaring types.

So create a App.types.ts file inside the src folder and move all the type declarations from the App component to the App.types.ts file:

export interface AppProps {
  title: string;
}

export interface Name {
  first: string;
  last: string;
}

export interface Login {
  uuid: string;
}

export interface Users {
  name: Name;
  login: Login;
  email: string;
}

Note that we're also exporting the AppProps component in the above code.

Now, update the App.tsx file to use these types as shown below:

import axios from 'axios';
import { FC, useEffect, useState } from 'react';
import { AppProps, Users } from './App.types';
import User from './components/User';

const App: FC<AppProps> = ({ title }) => {
  const [users, setUsers] = useState<Users[]>([]);

  // ...
};

export default App;

As you can see above, we're importing AppProps and Users from the App.types file:

import { AppProps, Users } from './App.types';

And your User.tsx file will look like this now:

import { FC } from 'react';
import { Name } from '../App.types';

interface UserProps {
  name: Name;
  email: string;
}

const User: FC<UserProps> = ({ name, email }) => {
  return (
    <li>
      <div>
        Name: {name.first} {name.last}
      </div>
      <div>Email: {email}</div>
      <hr />
    </li>
  );
};

export default User;

As you can see above, we're importing Name from the App.types file.

import { Name } from '../App.types';

How to Display a Loading Indicator

Whenever you're making an API call to display something, it's always good to display some loading indicator while the API call is going on.

So let's add a new isLoading state inside the App component:

const [isLoading, setIsLoading] = useState(false);

As you can see, we have not mentioned any data type while declaring a state like this:

const [isLoading, setIsLoading] = useState<boolean>(false);

This is because, when we assign any initial value (false in our case), TypeScript automatically infers the type of data we will be storing – which is boolean in our case.

When we declared the users state, it was not clear what we would be storing by just the initial value of an empty array []. So we needed to mention its type like this:

const [users, setUsers] = useState<Users[]>([]);

Now, change the useEffect code to the below code:

useEffect(() => {
  const getUsers = async () => {
    try {
      setIsLoading(true);
      const { data } = await axios.get(
        'https://randomuser.me/api/?results=10'
      );
      console.log(data);
      setUsers(data.results);
    } catch (error) {
      console.log(error);
    } finally {
      setIsLoading(false);
    }
  };
  getUsers();
}, []);

Here, we're calling setIsLoading with a value of true before the API call. Inside the finally block, we're setting it back to false.

The code written inside the finally block will always execute whether it's a success or failure. So whether the API call succeeds or fails, we need to hide the loading message, and we're using the finally block to achieve that.

Now, we can use the isLoading state value to display a loading message on the screen.

After the h1 tag and before the ul tag, add the following code:

{isLoading && <p>Loading...</p>}

Now, if you check the application, you will be able to see the loading message while the list of users is getting loaded.

Loading Indication Display

So this is a better user experience.

But if you keep a closer look at the displayed users, you will see that the users are getting changed once loaded.

So initially we see a set of 10 random users, but then immediately after we see a different set of random users without reloading the page.

This is because we're using React version 18 (which you can verify from the package.json file) and React.StrictMode inside the src/main.tsx file.

And with version 18 of React, when we use React.StrictMode, every useEffect hook executes twice even with no dependency specified.

This only happens in the development environment and not in production when you deploy the application.

Because of this, the API call is made twice. Since the random users API returns a new set of random users every time the API is called, we're setting a different set of users to the users array using the setUsers call inside the useEffect hook.

This is the reason we see users getting changed without refreshing the page.

If you don't want this behaviour during development, you can remove the React.StrictMode from the main.tsx file.

So change the below code:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App title='TypeScript Demo' />
  </React.StrictMode>
);

to this code:

import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <App title='TypeScript Demo' />
);

Now, if you check the application, you will see that the list of users is not getting changed once it's loaded.

How to Load Users on Button Click

Now, instead of making the API call on page load, let's add a "show users" button and we will make the API call when we click on that button.

So after the h1 tag, add a new button as shown below:

<button onClick={handleClick}>Show Users</button>

Now, add the handleClick method inside the App component and move all the code from the getUsers function to the handleClick method:

const handleClick = async () => {
  try {
    setIsLoading(true);
    const { data } = await axios.get('https://randomuser.me/api/?results=10');
    console.log(data);
    setUsers(data.results);
  } catch (error) {
    console.log(error);
  } finally {
    setIsLoading(false);
  }
};

Now, you can remove or comment out the useEffect hook, as it's no longer needed.

Your updated App.tsx file will look like this now:

import axios from 'axios';
import { FC, useState } from 'react';
import { AppProps, Users } from './App.types';
import User from './components/User';

const App: FC<AppProps> = ({ title }) => {
  const [users, setUsers] = useState<Users[]>([]);
  const [isLoading, setIsLoading] = useState<boolean>(false);

  const handleClick = async () => {
    try {
      setIsLoading(true);
      const { data } = await axios.get('https://randomuser.me/api/?results=10');
      console.log(data);
      setUsers(data.results);
    } catch (error) {
      console.log(error);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div>
      <h1>{title}</h1>
      <button onClick={handleClick}>Show Users </button>
      {isLoading && <p>Loading...</p>}
      <ul>
        {users.map(({ login, name, email }) => {
          return <User key={login.uuid} name={name} email={email} />;
        })}
      </ul>
    </div>
  );
};

export default App;

Now, if you check the application, you will see that users are loaded only when clicking on the show users button. We also see the loading message.

Users Loaded On Button Click

How to Handle the Change Event

Now, let's add an input field. When we type anything in that input field, we will display the entered text below that input field.

Add an input field after the button like this:

<input type='text' onChange={handleChange} />

And declare a new state to store the entered value like this:

const [username, setUsername] = useState('');

Now, add a handleChange method inside the App component like this:

 const handleChange = (event) => {
  setUsername(event.target.value);
};

However, you will see that we're getting a TypeScript error for the event parameter.

Event Type Missing TypeScript Error

With TypeScript, we always need to specify the type of each and every function parameter.

Here, TypeScript is not able to identify the type of the event parameter.

To find out the type of event parameter, we can change the below code:

<input type='text' onChange={handleChange} />

to this code:

<input type='text' onChange={(event) => {}} />

Here, we're using an inline function, because when using inline function, the correct type is automatically passed to the function parameter so we don't need to specify it.

If you mouse over the event parameter, you will be able to see the exact type of event that we can use in our handleChange function as you can see below:

Identifying TypeScript Event Type Using Inline Function

Now, you can revert the below code:

<input type='text' onChange={(event) => {}} />

to this code:

<input type='text' onChange={handleChange} />

Now, let's display the value of the username state variable below the input field:

<input type='text' onChange={handleChange} />
<div>{username}</div>

If you check the application now, you will be able to see the entered text displayed below the input field.

Displaying User Entered Text On UI

Thanks for Reading

That's it for this tutorial. I hope you learned a lot from it.

Want to watch the video version of this tutorial? You can check out this video.

You can find the complete source code for this application in this repository.

If you want to master JavaScript, ES6+, React, and Node.js with easy-to-understand content, check out my YouTube channel. Don't forget to subscribe.

Want to stay up to date with regular content on JavaScript, React, and Node.js? Follow me on LinkedIn.

Thankfully, React Error Boundaries are here to save the day!

Whenever any type of error happens during the rendering of a component or in lifecycle methods, React displays a blank page without showing any error message.

And getting a blank page on the production site is definitely not a good user experience.

So React Error Boundaries provide a powerful mechanism to catch and gracefully handle errors that occur during the rendering lifecycle of your components.

Want to watch the video version of this tutorial? You can check out the video below:

What are Error Boundaries in React?

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed.

Error boundaries catch errors during rendering, in lifecycle methods, and in the whole tree below them.

Why Do We Need Error Boundaries?

In your React application, there might be some edge cases that you might not have handled. Because of that you might get an error in production, and you will see a blank screen.

This is not a good user experience, so adding an error boundary helps to mitigate this issue.

To better understand it, you can clone this GitHub Repository which I have created in this video.

Once cloned, you can execute the npm install command from the project folder to install all the project dependencies and then execute the npm run dev command to start the application.

Now, you can access the application, by visiting http://localhost:5173/.

You will see the following screen:

Initial Screen on the Example App

How the Application Works

Now, if you click on any of the courses, you will see the course details page.

Let's say you click on the Learn Food Recipes course. Then you will see the screen as shown below:

Course Details Page

If you check the code, you will see that the details page content is coming from the CourseDetails component as shown below:

Course Details Component Code

As you can see above, we have static courses data imported from the utils/data file at line number 3. On line number 8, we're using the array find method to check if the page URL matches any of the course URLs.

If we find a match, then the find method will return the found course which we're storing in the selectedCourse variable.

And if there is no matching course, the find method will return undefined as the value.

So on line number 11, we're redirecting the user to the home page using the Navigate component of react-router-dom library if there is no matching course found.

To verify that, you can add some extra characters to the details page URL, and you will see that you're redirected to the home page as can be seen below:

Automatic Redirection From Details Page

How to Generate an Error in the Application

Instead, let's say we don't have the condition of line number 11 for redirection, and also we don't have the fallback of an empty object {} specified.

So instead of this code:

const CourseDetails = () => {
  const { pathname } = useLocation();
  const selectedCourse = courses.find((course) => course.url === pathname);

  if (!selectedCourse) {
    return <Navigate to='/' />;
  }
  const { title, duration, enrolledCount, courseImage, author } =
    selectedCourse || {};
  ...
}

we have code like this:

const CourseDetails = () => {
  const { pathname } = useLocation();
  const selectedCourse = courses.find((course) => course.url === pathname);

  const { title, duration, enrolledCount, courseImage, author } =
    selectedCourse;
  ...
}

Now, with this code, if we don't find a course with a matching course URL, then the array find method will return undefined as the value.

So when we destructure the title, duration and other properties from the selectedCourse variable, JavaScript will throw an error.

To see it in action, open Chrome DevTools, and go to any of the course's details page, and add some random characters in the URL.

When you press the enter key, you will see a blank screen with an error in the console, as you can see below:

Console Error With Broken Application

So as you can see, the application is broken and nothing is displayed on the screen. As I mentioned above, getting a blank screen without any text is not a good user experience. The user will not know what happened and what to do in such situations.

The error is happening because we're trying to destructure properties from undefined.

You can only destructure properties from objects and not undefined.

Forgetting to provide a default fallback of an empty object {} is a common thing when you have a large application.

So to avoid such scenarios of getting a black page, we can use the popular react-error-boundary npm library.

How to Use the react-error-boundary Library

To use this library, let's first install it by executing the following command from the terminal from inside the project folder:

npm install react-error-boundary

Once installed, restart the application by executing the npm run dev command.

Now, we can wrap our entire App component inside the ErrorBoundary component imported from the react-error-boundary library.

So open src/main.jsx file and change the below code:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.scss';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

to this code:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { ErrorBoundary } from 'react-error-boundary';
import App from './App';
import './index.scss';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <ErrorBoundary fallback={<p>Something went wrong. Try again later.</p>}>
      <App />
    </ErrorBoundary>
  </React.StrictMode>
);

In the above code, we have wrapped the App component in between the opening and closing ErrorBoundary component and we have also imported the ErrorBoundary component from react-error-boundary.

For the ErrorBoundary component, we're providing the fallback prop with the text to be displayed in case any error occurs.

So now with this change, if you try to navigate to some invalid details page URL, you will see the fallback text displayed as you can see below:

Displaying Fallback Error Message

But just displaying this simple text is not veru useful. So what else can we do?

How to Display a Proper Error Page

So instead of using the fallback prop, we will use FallbackComponent prop. As a value for the prop, we can provide either a class component or a functional component.

So inside the components folder create a new error-page folder. Inside it create an ErrorPage.jsx file with the following content:

import React from 'react';
import NotFoundImage from '../../assets/writer.svg';
import './error_page.scss';

const ErrorPage = ({ error }) => {
  console.log('Error occured', error);
  return (
    <div className='error-page'>
      <img src={NotFoundImage} alt='Page not found' />
      <p className='error-msg'>
        Something went wrong. Try clicking the refresh page button to reload the
        application.{' '}
        <button className='btn'>
          Refresh page
        </button>
      </p>
    </div>
  );
};

export default ErrorPage;

You can download the writer.svg image which is referenced in the above code from this repository and place it inside src/assets folder.

Also, create error_page.scss file inside the error-page folder and add the following content inside it:

.error-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 5rem;
  max-height: 100vh;

  img {
    width: 40%;
    height: auto;
    margin-bottom: 1rem;
  }
  p {
    margin-top: 1rem;
    font-size: 2rem;
    line-height: 130%;
  }
  .error-msg {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    font-weight: bold;
    gap: 1rem;
  }
  .btn {
    width: fit-content;
    border: none;
    padding: 5px 10px;
    background: #bd1d3d;
    color: #fff;
    letter-spacing: 1px;
    border-radius: 5px;
    font-size: 18px;
    cursor: pointer;
  }
}

Now, open the src/main.jsx file and replace it with the following content:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { ErrorBoundary } from 'react-error-boundary';
import App from './App';
import ErrorPage from './components/error-page/ErrorPage';
import './index.scss';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <ErrorBoundary FallbackComponent={ErrorPage}>
      <App />
    </ErrorBoundary>
  </React.StrictMode>
);

In the above code, we have used FallbackComponent prop instead of fallback prop and we added the ErrorPage component as its value.

Also, note that we have added an import statement for the ErrorPage component.

So now, If you try going to some invalid details page URL, you will see a nicely designed error page with a Refresh page button displayed on the screen as can be seen below:

Displaying Nice Error Page

So now with the error boundary added, the end user no longer sees a blank page when something goes wrong.

So even if there is an error in the console, we no longer see a blank page.

This is a great improvement to the application.

Note that the error page is displayed only if rendering fails like a blank page is displayed.

And when the error page is displayed, we automatically get the error prop inside the ErrorPage component which we have created inside the ErrorPage.jsx file as you can see below:

import React from 'react';
import NotFoundImage from '../../assets/writer.svg';
import './error_page.scss';

const ErrorPage = ({ error }) => {
  console.log('Error occured', error);
  return (
    <div className='error-page'>
      <img src={NotFoundImage} alt='Page not found' />
      <p className='error-msg'>
        Something went wrong. Try clicking the refresh page button to reload the
        application.{' '}
        <button className='btn'>
          Refresh page
        </button>
      </p>
    </div>
  );
};

export default ErrorPage;

In the above code, we're just logging the error prop value to the console.

The ErrorBoundary component also accepts an onReset function prop where we can write code to redirect the user to the home page.

And with the onReset prop added to the ErrorBoundary component, we get access to the resetErrorBoundary prop inside the ErrorPage component.

So change the ErrorPage component to the below code:

const ErrorPage = ({ error, resetErrorBoundary }) => {
  console.log('Error occured', error);
  return (
    <div className='error-page'>
      <img src={NotFoundImage} alt='Page not found' />
      <p className='error-msg'>
        Something went wrong. Try clicking the refresh page button to reload the
        application.{' '}
        <button className='btn' onClick={resetErrorBoundary}>
          Refresh page
        </button>
      </p>
    </div>
  );
};

In the above code, we're destructuring the resetErrorBoundary prop which we will be using for the onClick handler of Refresh page button.

Now, change the ErrorBoundary component code from src/main.jsx file to the below code:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { ErrorBoundary } from 'react-error-boundary';
import App from './App';
import ErrorPage from './components/error-page/ErrorPage';
import './index.scss';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <ErrorBoundary
      FallbackComponent={ErrorPage}
      onReset={() => (location.href = '/')}
    >
      <App />
    </ErrorBoundary>
  </React.StrictMode>
);

So when we click on the Refresh page button, the resetErrorBoundary function will be called and it will reset all the errors and code from the onReset function which we have added to the src/main.jsx file will be executed which will redirect the user to the home page.

You can see it in action below:

Resetting Errors With Redirection

So as you can see above, with the error boundary added, we're clearly able to see the proper error page with Refresh page button. Once we click on the button, we're redirected to the home page, and all the errors are cleared from the console.

This is a great user experience for the end user instead of getting a blank page.

Thanks for Reading

That's it for this tutorial. I hope you learned a lot from it.

Want to watch the video version of this tutorial? You can check out this video.

You can find the complete source code for this application in this repository.

If you want to master JavaScript, ES6+, React, and Node.js with easy-to-understand content, check out my YouTube channel. Don't forget to subscribe.

Want to stay up to date with regular content on JavaScript, React, and Node.js? Follow me on LinkedIn.

By building this app, you will learn:

• How to build an application using Unsplash API in React
• How to make API Calls in different scenarios
• How to use useCallback hook to avoid function re-creation
• How to use ESLint to fix application issues
• How to Implement Pagination in React

and much more...

Want to watch the video version of this tutorial? You can check out the video below:

Initial Project Setup

We will use Vite to create a project which is a popular alternative to create-react-app.

Execute the following command to create a vite project:

npm create vite

Once executed, you will be asked some questions.

For the project name, enter unsplash_image_search.

For framework, select React and for variant select JavaScript:

Creating Project Using Vite

Once the project is created, open the project in VS Code and execute the following commands from the terminal:

cd unsplash_image_search
npm install
npm run dev

Access the application by navigating to http://127.0.0.1:5173/.

Application Started

You will see the default application screen as shown below:

Initial Screen

Next, delete the App.css file and replace the contents of the App.jsx file with the following content:

import React from 'react';
import './index.css';

const App = () => {
  return <div>Welcome to Unsplash Image Search</div>;
};

export default App;

Now, open the index.css file and add the contents from this GitHub repo to it.

Let's install Bootstrap and react-bootstrap npm packages by executing the following command:

npm install bootstrap react-bootstrap

Open the main.jsx file and add the following line of code on the first line, to add the base bootstrap CSS file:

import 'bootstrap/dist/css/bootstrap.min.css';

The complete main.jsx file will look like this:

import 'bootstrap/dist/css/bootstrap.min.css';
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Now, restart the application by executing npm run dev command.

You will see the welcome message displayed on the screen as shown below:

Welcome Screen

How to Add Search Input

Now, replace the contents of App.jsx file with the following content:

import React from 'react';
import { Form } from 'react-bootstrap';
import './index.css';

const App = () => {
  return (
    <div className='container'>
      <h1 className='title'>Image Search</h1>
      <div className='search-section'>
        <Form>
          <Form.Control
            type='search'
            placeholder='Type something to search...'
            className='search-input'
          />
        </Form>
      </div>
    </div>
  );
};

export default App;

Here, we're displaying the title of Image search inside a container class, which is a Bootstrap class, to add some margin to the left and right of the page.

Then we added a form with a type of search.

If you check the application, you will see the following screen:

Initial Search UI

Now, we need to store the value entered by the user somewhere in the component.

As we will have only one input field on the page, we will use the useRef hook instead of the useState hook.

Using the useRef hook does not re-render the component when its value changes, which is good for performance improvement. On the other hand, changing state re-renders the component, so all of the child components will also re-render.

Inside the App.jsx file, declare the useRef hook as shown below:

const searchInput = useRef(null);

Don't forget to add import for useRef hook at the top of the file:

import React, { useRef } from 'react';

Also, add a ref prop for the search input, like this:

<Form.Control
   type='search'
   placeholder='Type something to search...'
   className='search-input'
   ref={searchInput}
/>

Your complete App.jsx file will look like this:

import React, { useRef } from 'react';
import { Form } from 'react-bootstrap';
import './index.css';

const App = () => {
  const searchInput = useRef(null);
  return (
    <div className='container'>
      <h1 className='title'>Image Search</h1>
      <div className='search-section'>
        <Form>
          <Form.Control
            type='search'
            placeholder='Type something to search...'
            className='search-input'
            ref={searchInput}
          />
        </Form>
      </div>
    </div>
  );
};

export default App;

How to Handle the Form Submit Action

When we enter any search term in the search box and press the enter key, we want to add the search functionality.

To do so, add an onSubmit handler to the Form tag and create a handleSearch method. And assign it to the onSubmit prop like this:

import React, { useRef } from 'react';
import { Form } from 'react-bootstrap';
import './index.css';

const App = () => {
  const searchInput = useRef(null);

  const handleSearch = (event) => {
    event.preventDefault();
    console.log('submitted');
  };

  return (
    <div className='container'>
      <h1 className='title'>Image Search</h1>
      <div className='search-section'>
        <Form onSubmit={handleSearch}>
          <Form.Control
            type='search'
            placeholder='Type something to search...'
            className='search-input'
            ref={searchInput}
          />
        </Form>
      </div>
    </div>
  );
};

export default App;

Here, we have added <Form onSubmit={handleSearch}> and inside the handleSearch method we used the event.preventDefault method.

Once the form is submitted by pressing the enter key in the search box, the page will not refresh and a submitted text will be displayed in the console as shown below:

Form Submission Action

Now, instead of printing "submitted", we can print the value entered by the user using searchInput.current.value.

Here, searchInput is the ref and searchInput.current will be the actual search box input. Also, using searchInput.current.value will give the actual value entered by the user.

So, replace the handleSearch method with the following code:

const handleSearch = (event) => {
  event.preventDefault();
  console.log(searchInput.current.value);
};

And now you will see the entered value displayed in the console:

Displaying Entered Search Term Value In Console

How to Add Quick Search Options

Now, let's add action buttons with a class of filters for a quick search just below the search-section div:

<div className='container'>
      <h1 className='title'>Image Search</h1>
      <div className='search-section'>
        ...
      </div>
      <div className='filters'>
        <div>Nature</div>
        <div>Birds</div>
        <div>Cats</div>
        <div>Shoes</div>
      </div>
</div>

Now, the application will look like this:

Quick Search Options Added

When we click on any of the displayed buttons, we can display the clicked button value in the input search box, so we can use it for searching the images.

Change the filters div to the below code:

<div className='filters'>
   <div onClick={() => handleSelection('nature')}>Nature</div>
   <div onClick={() => handleSelection('birds')}>Birds</div>
   <div onClick={() => handleSelection('cats')}>Cats</div>
   <div onClick={() => handleSelection('shoes')}>Shoes</div>
</div>

In the above code, when you click on any option, we're passing the selected option to the handleSelection method.

Now, add a new handleSelection method inside the App component as shown below:

const handleSelection = (selection) => {
  searchInput.current.value = selection;
};

Your complete App.jsx file will look like this:

import React, { useRef } from 'react';
import { Form } from 'react-bootstrap';
import './index.css';

const App = () => {
  const searchInput = useRef(null);

  const handleSearch = (event) => {
    event.preventDefault();
    console.log(searchInput.current.value);
  };

  const handleSelection = (selection) => {
    searchInput.current.value = selection;
  };

  return (
    <div className='container'>
      <h1 className='title'>Image Search</h1>
      <div className='search-section'>
        <Form onSubmit={handleSearch}>
          <Form.Control
            type='search'
            placeholder='Type something to search...'
            className='search-input'
            ref={searchInput}
          />
        </Form>
      </div>
      <div className='filters'>
        <div onClick={() => handleSelection('nature')}>Nature</div>
        <div onClick={() => handleSelection('birds')}>Birds</div>
        <div onClick={() => handleSelection('cats')}>Cats</div>
        <div onClick={() => handleSelection('shoes')}>Shoes</div>
      </div>
    </div>
  );
};

export default App;

Displaying Selection Option In the Search Box

How to Get Access to the Unsplash API

Now, to implement the image search, we need to get the API key from Unsplash Website.

Navigate to this URL, and click on the "Register as a developer" button displayed at the top right corner of the page. Create your account by entering all the necessary details.

Once registered, you will be redirected to this page as shown below:

Registering New Application With Unsplash API

Click on the New Application button. On the next screen:

• Check all the checkboxes and click on Accept Terms button
• Enter values for Application name and Description and click Create application button

Creating New Application With Unsplash API

Scroll down a bit and copy the Access Key which is displayed on the screen:

Getting Access Key From Unsplash API

Next, create a new .env file in your project and add a new environment variable with the name VITE_API_KEY. Also, assign the copied value of the API key to it:

VITE_API_KEY=A4UiJ5OIwL_4ccbCAE1ZXw3EgoNRotMbdNe12qtKHzM

Make sure to start the variable name with VITE_ so it will be accessible in the application.

Your application folder structure will look like this:

File Structure With .env File

Also, make sure to add .env in the .gitignore file so the file will not be pushed to GitHub when changes are pushed to GitHub.

Now, navigate to Unsplash Documentation and click on the Search photos by keyword section. And copy the following base API URL: https://api.unsplash.com/search/photos.

Search Images API Documentation Page

Now, open App.jsx file and paste that copied URL as API_URL after all import statements, like this:

const API_URL = 'https://api.unsplash.com/search/photos';

According to the documentation, the search photos API with the above URL accepts the query, page and per_page as the query parameters. Just note this, as we will be using it soon.

How to Make an API Call to the Unsplash API

To make an API call, let's first install the axios npm library by executing the following command from the project folder:

npm install axios

Once installed, start the application again by executing the npm run dev command.

Next, declare a new constant just below the API_URL constant:

const IMAGES_PER_PAGE = 20;

Here, we're specifying to display 20 images per page when we will implement pagination. You can change it to any value you want.

Add a new fetchImages function inside the App component like this:

const fetchImages = async () => {
  try {
    const { data } = await axios.get(
      `${API_URL}?query=${
        searchInput.current.value
      }&page=1&per_page=${IMAGES_PER_PAGE}&client_id=${
        import.meta.env.VITE_API_KEY
      }`
    );
    console.log('data', data);
  } catch (error) {
    console.log(error);
  }
};

Here, we have defined a fetchImages function which is declared async so we can use await inside it.

If you're not aware of promises and async/await, I highly recommend checking out this article.

Then, inside the fetchImages function, we're making a GET API call using axios to the URL which we have stored in the API_URL constant: https://api.unsplash.com/search/photos.

For the API URL, we're passing the following query parameters using template literal syntax:

• query with the value of user entered or quick search option value
• page with a value of 1 to get the first page data
• per_page with the value of 20 which is defined in the constant IMAGES_PER_PAGE
• client_id with the value of the API key from the .env file.

As we're using Vite, to access environment variables from the .env file, we need to use import.meta.env.VITE_API_KEY.

Here, VITE_API_KEY is the environment variable we declared in the .env file.

Also, import the axios library at the top of the file like this:

import axios from axios;

The updated App.jsx file will look like this:

import axios from 'axios';
import React, { useRef } from 'react';
import { Form } from 'react-bootstrap';
import './index.css';

const API_URL = 'https://api.unsplash.com/search/photos';
const IMAGES_PER_PAGE = 20;

const App = () => {
  const searchInput = useRef(null);

  const fetchImages = async () => {
    try {
      const { data } = await axios.get(
        `${API_URL}?query=${
          searchInput.current.value
        }&page=1&per_page=${IMAGES_PER_PAGE}&client_id=${
          import.meta.env.VITE_API_KEY
        }`
      );
      console.log('data', data);
    } catch (error) {
      console.log(error);
    }
  };

  const handleSearch = (event) => {
    event.preventDefault();
    console.log(searchInput.current.value);
  };

  const handleSelection = (selection) => {
    searchInput.current.value = selection;
    fetchImages();
  };

  return (
    <div className='container'>
      <h1 className='title'>Image Search</h1>
      <div className='search-section'>
        <Form onSubmit={handleSearch}>
          <Form.Control
            type='search'
            placeholder='Type something to search...'
            className='search-input'
            ref={searchInput}
          />
        </Form>
      </div>
      <div className='filters'>
        <div onClick={() => handleSelection('nature')}>Nature</div>
        <div onClick={() => handleSelection('birds')}>Birds</div>
        <div onClick={() => handleSelection('cats')}>Cats</div>
        <div onClick={() => handleSelection('shoes')}>Shoes</div>
      </div>
    </div>
  );
};

export default App;

If you check the application, you will see that, on every click of the quick search option, the API call is made to the Unsplash API, and we get the data for the selected option.

Making API Call When Clicked Quick Search Option

To make an API call when we enter the search text and press enter key, we need to call the fetchImages function from the handleSearch function also.

To do this, add a call to fetchImages function inside the handleSearch function as shown below:

const handleSearch = (event) => {
    event.preventDefault();
    console.log(searchInput.current.value);
    fetchImages();
};

Now, you will be able to see the API call made in the network tab when we enter a search text and press enter key.

Making API Call When Entered Text In The Searchbox

How to Store API Data Using State

Now, let's display the images coming from the API on the screen.

To display them on the screen, we first need to store the data coming from the API.

If you see the structure of the API response, you will see as shown below:

API Response

So, declare two states in the App.jsx file: one for storing response images which are coming in the results property, and another for storing total_pages so we can implement the pagination.

const App = () => {
  const searchInput = useRef(null);
  const [images, setImages] = useState([]);
  const [totalPages, setTotalPages] = useState(0);
  ....
}

And update the fetchImages function to store the data.results using setImages and total pages using setTotalPages function:

const fetchImages = async () => {
    try {
      const { data } = await axios.get(
        `${API_URL}?query=${
          searchInput.current.value
        }&page=1&per_page=${IMAGES_PER_PAGE}&client_id=${
          import.meta.env.VITE_API_KEY
        }`
      );
      console.log('data', data);
      setImages(data.results);
      setTotalPages(data.total_pages);
    } catch (error) {
      console.log(error);
    }
  };

How to Display Images On Screen

Now, let's display the images that we have stored in the images state variable.

If you expand the individual image response of the API, you can see the id, alt_description, urls properties which we can use to display individual images.

API Response Properties

So, just after the filters div, add another div for displaying images like this:

<div className='filters'>
  ...
</div>
<div className='images'>
  {images.map((image) => {
    return (
      <img
        key={image.id}
        src={image.urls.small}
        alt={image.alt_description}
        className='image'
      />
    );
  })}
</div>

Here, we're displaying the small version of the image from the urls property of the individual image.

We can simplify the above code further. Inside the array map method, instead of using a curly bracket with a return keyword, we can re-write it like this:

<div className='filters'>
  ...
</div>
<div className='images'>
{images.map((image) => (
  <img
    key={image.id}
    src={image.urls.small}
    alt={image.alt_description}
    className='image'
  />
))}
</div>

Here, we're implicitly returning the JSX from the array map method by adding a round bracket around the JSX.

Now, If you search for any text, you will see the images displayed correctly.

Displayed Images When Clicked On Quick Search Icon

Displayed Images When Clicked On Quick Search Icon

Displayed Images After Entering Search Term

How to Implement Pagination

Now, we will add previous and next buttons to see different sets of images.

So, first declare a new state in the App component as shown below:

const [page, setPage] = useState(1);

Inside the fetchImages function, change page=1 to page=${page} so when we change the value of the page, images for the selected page will be loaded.

Add a new div with a class of buttons just below the images div as shown below:

<div className='images'>
  ...
</div>
<div className='buttons'>
  {page > 1 && <Button>Previous</Button>}
  {page < totalPages && <Button>Next</Button>}
</div>

In the above code, we show the Previous button only if the value of page is greater than 1, which means for the first page, we will not see the Previous button.

And If the current value of page is less than the totalPages, then only we show the Next button. This means that for the last page, we will not see the Next button.

If you remember, we have already set the value of totalPages inside the fetchImages function by calling the setTotalPages function, and we're using it above to hide the Next button.

Also, don't forget to add import for Button component from react-bootstrap inside the App component:

import { Button } from 'react-bootstrap';

Now, when we click on the Previous button, we need to decrement the value of the page state variable. And when we click on Next button, we need to increment the value of the page state variable.

So, let's add an onClick handler for both of these buttons as shown below:

<div className='buttons'>
  {page > 1 && (
    <Button onClick={() => setPage(page - 1)}>Previous</Button>
  )}
  {page < totalPages && (
    <Button onClick={() => setPage(page + 1)}>Next</Button>
  )}
</div>

Let's console log the value of the page state variable, so we can see the value getting updated.

After handleSelection method, add console.log like this:

console.log('page', page);

Displaying Current Page Value In Console

As you can see above, initially for the first page, we don't see a Previous button.

And when we click on the Next button, we see the Previous and Next buttons, and the page value is also incremented by 1 as you can see in the console.

So, on every Next button click, the page value is incremented by 1. And on every Previous button click, the page value is decremented by 1.

And when we come back to the first page, the Previous button is hidden again which is as expected.

As you might have noticed above, the page value changes on click of Previous and Next buttons but a new set of images are not loaded when we click of those buttons.

This is because we're not making the API call again with an updated page value when the page value changes.

So let's do just that.

Add a useEffect hook in the App component like this:

useEffect(() => {
  fetchImages();
}, [page]);

Now, every time we click on Previous or Next button, the page value changes, so the above useEffect hook will be executed, where we're calling the fetchImages function to load the next set of images.

Now, If you check the application, you will see images loaded correctly.

Loading Next Set Of Images Using Pagination

As you can see above, we're correctly loading images when clicked on Previous or Next button.

But there is a small issue.

If we're not on the first or last page, we see the Previous and Next buttons and when we try to search for another term or click on quick search options, we still see the Previous button.

Ideally, when we search for another term or click on another quick search option, we should start from the first page, so only the Next button should be visible. But right now both Previous and Next buttons are visible as you can see below:

Issue With Previous Buttons Not Hiding On Search

To fix this issue, we need to reset the page state value once we search for another term or click on another quick search option.

So inside the handleSearch and handleSelection methods, call setPage function with a value of 1 like this:

const handleSearch = (event) => {
  event.preventDefault();
  console.log(searchInput.current.value);
  fetchImages();
  setPage(1);
};

const handleSelection = (selection) => {
  searchInput.current.value = selection;
  fetchImages();
  setPage(1);
};

As you can see, we're repeating the fetchImages and setPage function calls in both of these methods.

So, let's create another function with a name resetSearch and move the fetchImages and setPage function calls inside it. Let's call that function from handleSearch and handleSelection methods as shown below:

const resetSearch = () => {
  setPage(1);
  fetchImages();
};

const handleSearch = (event) => {
  event.preventDefault();
  console.log(searchInput.current.value);
  resetSearch();
};

const handleSelection = (selection) => {
  searchInput.current.value = selection;
  resetSearch();
};

Now, If you check the application, you will see that we always get the correct first page result displayed when clicking on the quick search option or entering any search term which is as expected.

Demo Of Previous Button Hidden On Every Search

Your entire App.jsx file will look like this:

import axios from 'axios';
import { useEffect, useRef, useState } from 'react';
import { Button, Form } from 'react-bootstrap';
import './index.css';

const API_URL = 'https://api.unsplash.com/search/photos';
const IMAGES_PER_PAGE = 20;

const App = () => {
  const searchInput = useRef(null);
  const [images, setImages] = useState([]);
  const [page, setPage] = useState(1);
  const [totalPages, setTotalPages] = useState(0);

  useEffect(() => {
    fetchImages();
  }, [page]);

  const fetchImages = async () => {
    try {
      const { data } = await axios.get(
        `${API_URL}?query=${
          searchInput.current.value
        }&page=${page}&per_page=${IMAGES_PER_PAGE}&client_id=${
          import.meta.env.VITE_API_KEY
        }`
      );
      console.log('data', data);
      setImages(data.results);
      setTotalPages(data.total_pages);
    } catch (error) {
      console.log(error);
    }
  };

  const resetSearch = () => {
    setPage(1);
    fetchImages();
  };

  const handleSearch = (event) => {
    event.preventDefault();
    console.log(searchInput.current.value);
    resetSearch();
  };

  const handleSelection = (selection) => {
    searchInput.current.value = selection;
    resetSearch();
  };

  console.log('page', page);

  return (
    <div className='container'>
      <h1 className='title'>Image Search</h1>
      <div className='search-section'>
        <Form onSubmit={handleSearch}>
          <Form.Control
            type='search'
            placeholder='Type something to search...'
            className='search-input'
            ref={searchInput}
          />
        </Form>
      </div>
      <div className='filters'>
        <div onClick={() => handleSelection('nature')}>Nature</div>
        <div onClick={() => handleSelection('birds')}>Birds</div>
        <div onClick={() => handleSelection('cats')}>Cats</div>
        <div onClick={() => handleSelection('shoes')}>Shoes</div>
      </div>
      <div className='images'>
        {images.map((image) => (
          <img
            key={image.id}
            src={image.urls.small}
            alt={image.alt_description}
            className='image'
          />
        ))}
      </div>
      <div className='buttons'>
        {page > 1 && (
          <Button onClick={() => setPage(page - 1)}>Previous</Button>
        )}
        {page < totalPages && (
          <Button onClick={() => setPage(page + 1)}>Next</Button>
        )}
      </div>
    </div>
  );
};

export default App;

How to Find Bugs Using ESLint

When working on a React application, you should always have the ESLint VS Code extension enabled.

This will make sure that your code is correct and it will not produce any unexpected results in the future.

Based on the ESLint configuration defined in the .eslientrc file, you will get helpful suggestions to improve your code.

So, open your VS Code Extensions panel and install the ESLint extension as shown below:

VS Code ESLint Extension

After installing the extension, if you check the App.jsx file, you will immediately see a yellow squiggly line for the page dependency of the useEffect hook. If you mouse hover over it, you will see the warning as shown below:

ESLint Warning For useEffect Hook

As the warning indicates, we need to add a fetchImages dependency in the dependency array.

We're getting a warning because, in the functional component, on every re-render of the component, all the declared functions are re-created so their reference changes.

So, if we're using any outside variable or function inside the useEffect hook, we need to mention that in the dependencies, so whenever the dependency changes, the useEffect will be executed again.

To fix this, you can click on the quick fix link and select the "update the dependencies" option as shown below:

Updating useEffect Hook Dependency

All the missing dependencies will be automatically added in the dependency array.

You can also choose to manually add the dependency if you want.

However, with this change, you will see a new yellow warning for the fetchImages function as shown below:

ESLint Warning For useCallback

As I said previously, on every re-render of the component, the fetchImages function will be re-created and when it's changed, we again call the fetchImages function as it's added in the dependency.

To avoid that, we need to wrap the fetchImages function inside the useCallback hook as shown below:

const fetchImages = useCallback(async () => {
  try {
    const { data } = await axios.get(
      `${API_URL}?query=${
        searchInput.current.value
      }&page=${page}&per_page=${IMAGES_PER_PAGE}&client_id=${
        import.meta.env.VITE_API_KEY
      }`
    );
    console.log('data', data);
    setImages(data.results);
    setTotalPages(data.total_pages);
  } catch (error) {
    console.log(error);
  }
}, [page]);

In the above code, we're passing page as a dependency because, page is an external variable whose value might change in the future when we click on Previous or Next buttons or search for any new term.

If changing variables are used inside useEffect or useCallback or useMemo hook, we need to add them in the dependencies list.

Now, you will not see any more warnings in the App component.

Fixed ESLint Warning of useCallback

However, If you check the browser console, you will see an error and nothing is displayed on the UI as the application has crashed.

Function Expression Related Console Error

We're getting errors because we have declared fetchImages function using the function expression syntax, and functions declared using function expression syntax cannot be called before defining them.

Assigning a function to a variable makes it a function expression.

As you can see in the below image, we're calling fetchImages function on line number 16 and we're declaring the function on line number 19 and functions declared using function expression syntax cannot be accessed before the declaration.

Cause of Console Error

To fix this, we need to declare the function before calling it. So, move the fetchImages function before the useEffect hook and it will fix the issue.

Your App component will look like this:

const App = () => {
  const searchInput = useRef(null);
  const [images, setImages] = useState([]);
  const [page, setPage] = useState(1);
  const [totalPages, setTotalPages] = useState(0);

  const fetchImages = useCallback(async () => {
    try {
      const { data } = await axios.get(
        `${API_URL}?query=${
          searchInput.current.value
        }&page=${page}&per_page=${IMAGES_PER_PAGE}&client_id=${
          import.meta.env.VITE_API_KEY
        }`
      );
      console.log('data', data);
      setImages(data.results);
      setTotalPages(data.total_pages);
    } catch (error) {
      console.log(error);
    }
  }, [page]);

  useEffect(() => {
    fetchImages();
  }, [fetchImages, page]);

  const resetSearch = () => {
    setPage(1);
    fetchImages();
  };
  ...
}

Now, If you check the application, there will not be any error and the application will work as expected.

Code Improvements

Right now, we have not added any validation in the current application when the user enters a search term.

When the page is loaded, and when we don't enter any text and directly press the enter key in the input search box, we're making an API call which is not good.

Demo Of API Calls Made Without Any Value

To fix this, before making the API call, we first need to check if the searchInput.current.value is not empty and then only make the API call.

Change the fetchImages function from this code:

const fetchImages = useCallback(async () => {
  try {
    const { data } = await axios.get(
      `${API_URL}?query=${
        searchInput.current.value
      }&page=${page}&per_page=${IMAGES_PER_PAGE}&client_id=${
        import.meta.env.VITE_API_KEY
      }`
    );
    console.log('data', data);
    setImages(data.results);
    setTotalPages(data.total_pages);
  } catch (error) {
    console.log(error);
  }
}, [page]);

to the below code:

const fetchImages = useCallback(async () => {
  try {
    if (searchInput.current.value) {
      const { data } = await axios.get(
        `${API_URL}?query=${
          searchInput.current.value
        }&page=${page}&per_page=${IMAGES_PER_PAGE}&client_id=${
          import.meta.env.VITE_API_KEY
        }`
      );
      console.log('data', data);
      setImages(data.results);
      setTotalPages(data.total_pages);
    }
  } catch (error) {
    console.log(error);
  }
}, [page]);

Fixed Issue of API Calls Without Any Value

As you can see above, initially on page load and without entering any value, if we press the enter key, no API call is made.

Only when we type something and press enter, the API call is made, which is a good improvement to the application.

How to Remove an Extra Dependency From useEffect

As we have added a useCallback hook for the fetchImages function which has a page dependency, we no longer need the extra page dependency for the useEffect hook.

So change the below code:

useEffect(() => {
  fetchImages();
}, [fetchImages, page]);

to this code:

useEffect(() => {
  fetchImages();
}, [fetchImages]);

and the application will work as before without any issues.

How to Display Loading Indication

As you might have noticed in the previous image, when we searched for the text hello, the results were not displayed immediately.

As we're making an API call when searching for something, depending on the network speed, it might take some time to get the data from the API.

So while the API call is still going on, we can display a loading message, and once we get the response from the API, we will display the images.

To achieve that, declare a new loading state in the App component with an initial value of false:

const [loading, setLoading] = useState(false);

And now change the fetchImages function to the below code:

const fetchImages = useCallback(async () => {
  try {
    if (searchInput.current.value) {
      setErrorMsg('');
      setLoading(true);
      const { data } = await axios.get(
        `${API_URL}?query=${
          searchInput.current.value
        }&page=${page}&per_page=${IMAGES_PER_PAGE}&client_id=${
          import.meta.env.VITE_API_KEY
        }`
      );
      setImages(data.results);
      setTotalPages(data.total_pages);
      setLoading(false);
    }
  } catch (error) {
    setErrorMsg('Error fetching images. Try again later.');
    console.log(error);
    setLoading(false);
  }
}, [page]);

As you can see above, we're calling setLoading(true) before the API call and setLoading(false) after the API call.

Note that, we're also calling `setLoading(false)inside the catch block.

So, even if the API is successful or failed, we're setting loading state to false so we will not see the loading message all the time.

Now, to display the loading message change the below code:

<div className='images'>
  {images.map((image) => (
    <img
      key={image.id}
      src={image.urls.small}
      alt={image.alt_description}
      className='image'
    />
  ))}
</div>
<div className='buttons'>
  {page > 1 && (
    <Button onClick={() => setPage(page - 1)}>Previous</Button>
  )}
  {page < totalPages && (
    <Button onClick={() => setPage(page + 1)}>Next</Button>
  )}
</div>

to this code:

{loading ? (
  <p className='loading'>Loading...</p>
) : (
  <>
    <div className='images'>
      {images.map((image) => (
        <img
          key={image.id}
          src={image.urls.small}
          alt={image.alt_description}
          className='image'
        />
      ))}
    </div>
    <div className='buttons'>
      {page > 1 && (
        <Button onClick={() => setPage(page - 1)}>Previous</Button>
      )}
      {page < totalPages && (
        <Button onClick={() => setPage(page + 1)}>Next</Button>
      )}
    </div>
  </>
)}

In the above code, if loading is true, then we're displaying a loading message. Otherwise, we're displaying the images coming from the API.

If you check the application, you will see that the loading indication is displaying correctly.

Loading Indication Demo

Thanks for Reading

That's it for this tutorial. I hope you learned a lot from it.

You can find the complete source code for this application in this repository.

Want to watch the video version of this tutorial? You can check out this video.

If you want to master JavaScript, ES6+, React, and Node.js with easy-to-understand content, check out my YouTube channel. Don't forget to subscribe.

Want to stay up to date with regular content on JavaScript, React, and Node.js? Follow me on LinkedIn.

So let's get started.

If you'd like to learn along with a video version of this tutorial, you can also check out my YouTube playlist.

Why Use Promises in JavaScript?

ES6 introduced promises as a native implementation. Before ES6 we were using callbacks to handle asynchronous operations.

Let’s understand what callbacks are and what problem related to callbacks is solved by promises.

Let's say we have a list of posts and their respective comments, like this:

const posts = [
  { post_id: 1, post_title: 'First Post' },
  { post_id: 2, post_title: 'Second Post' },
  { post_id: 3, post_title: 'Third Post' },
];

const comments = [
  { post_id: 2, comment: 'Great!'},
  { post_id: 2, comment: 'Nice Post!'},
  { post_id: 3, comment: 'Awesome Post!'},
];

Now, we will write a function to get a post by passing the post id. If the post is found, we will retrieve the comments related to that post.

const getPost = (id, callback) => {
 const post = posts.find( post => post.post_id === id);
 if(post) {
   callback(null, post);
 } else {
   callback("No such post found", undefined);
 }
};

const getComments = (post_id, callback) => {
 const result = comments.filter( comment => comment.post_id === post_id);
 if(result) {
   callback(null, result);
 } else {
   callback("No comments found", undefined);
 }
}

In the above getPost and getComments functions, if there is an error we will pass it as the first argument. But if we get the result, we will call the callback function and pass the result as the second argument to it.

If you are familiar with Node.js, then you will know that this is a very common pattern used in every Node.js callback function.

Now let’s use those functions:

getPost(2, (error, post) => {
    if(error) {
     return console.log(error);
    }
    console.log('Post:', post);
    getComments(post.post_id, (error, comments) => {
        if(error) {
          return console.log(error);
        }
        console.log('Comments:', comments);
    });
});

After executing the above code, you will see the following output:

Result of calling getPost and getComments function

Here's a CodePen Demo.

As you can see, we have the getComments function nested inside the getPost callback.

Now imagine if we also wanted to find the likes of those comments. That would also get nested inside getComments callback, creating more nesting. This will eventually make the code difficult to understand.

This nesting of the callbacks is known as callback hell.

You can see that the error handling condition also gets repeated in the code, which creates duplicate code – this is not good.

So to fix this problem and allow asynchronous operations, promises were introduced.

What are Promises in JavaScript?

Promises are one of the most important parts of JavaScript – but they can be confusing and difficult to understand. Many new devs, as well as experienced ones, struggle to fully grasp them.

So what is a promise? A promise represents an asynchronous operation whose result will come in the future.

Before ES6, there was no way to wait for something to perform some operation. For example, when we wanted to make an API call, there was no way to wait until the results came back.

For that, we used to use external libraries like JQuery or Ajax which had their own implementation of promises. But there was no JavaScript implementation of promises.

But then promises were added in ES6 as a native implementation. And now, using promises in ES6, we can make an API call ourselves and wait until it's done to perform some operation.

How to Create a Promise

To create a promise we need to use the Promise constructor function like this:

const promise = new Promise(function(resolve, reject) {

});

The Promise constructor takes a function as an argument and that function internally receives resolve and reject as parameters.

The resolve and reject parameters are actually functions that we can call depending on the outcome of the asynchronous operation.

A Promise can go through three states:

• Pending
• Fulfilled
• Rejected

When we create a promise, it’s in a pending state. When we call the resolve function, it goes in a fulfilled state, and if we call reject it will go into the rejected state.

To simulate the long-running or asynchronous operation, we will use the setTimeout function.

const promise = new Promise(function(resolve, reject) {
 setTimeout(function() {
  const sum = 4 + 5;
  resolve(sum);
 }, 2000);
});

Here, we've created a promise which will resolve to the sum of 4 and 5 after a 2000ms (2 second) timeout is over.

To get the result of the successful promise execution, we need to register a callback handler using .then like this:

const promise = new Promise(function(resolve, reject) {
 setTimeout(function() {
  const sum = 4 + 5;
  resolve(sum);
 }, 2000);
});

promise.then(function(result) {
 console.log(result); // 9
});

So whenever we call resolve, the promise will return back the value passed to the resolve function which we can collect using the .then handler.

If the operation is not successful, then we call the reject function like this:

const promise = new Promise(function(resolve, reject) {
 setTimeout(function() {
  const sum = 4 + 5 + 'a';
  if(isNaN(sum)) {
    reject('Error while calculating sum.');
  } else {
    resolve(sum);
  }
 }, 2000);
});

promise.then(function(result) {
 console.log(result);
});

Here, if the sum is not a number, then we call the reject function with the error message. Otherwise, we call the resolve function.

If you execute the above code, you will see the following output:

Result of rejecting promise without catch handler

As you can see, we're getting an uncaught error message along with the message we've specified because calling the reject function throws an error. But we have not added an error handler for catching that error.

To catch the error, we need to register another callback using .catch like this:

promise.then(function(result) {
 console.log(result);
}).catch(function(error) {
 console.log(error);
});

You will see the following output:

Result of rejecting promise with catch handler

As you can see, we have added the .catch handler, so we're not getting any uncaught error – we're just logging the error to the console.

This also avoids stopping your application abruptly.

So it's always recommended to add the .catch handler to every promise so your application will not stop running because of the error.

When to Use resolve and reject

Let's take an example of an API call.

If you're making an API call and the API call is successful, then you call the resolve function by passing the result of the API as an argument to it.

And if the API is unsuccessful, then you call the reject function by passing any message as an argument to it.

So to indicate that the operation is successful, we call the resolve function and for indicating an unsuccessful operation, we call the reject function.

What is Promise Chaining and Why is it Useful?

Promise chaining is a technique used to manage asynchronous operations in a more organized and readable way.

In promise chaining, we can attach multiple .then handlers in which result of previous .then handler is automatically passed to the next .then handler.

Using promise chaining helps to avoid the problem of callback hell which we have seen previously.

Promise chaining also allows us to write asynchronous code in a more linear and sequential manner, which is easier to read and understand.

Also, when using promise chaining, we can attach only one.catch handler at the end of all the .then handlers. If any of the in-between promises fail, the last .catch handler will be automatically executed.

So we don't need to add multiple .catch handlers. This eliminates multiple error check as we did in the callback hell example previously.

How Promise Chaining Works

We can add multiple .then handlers to a single promise like this:

promise.then(function(result) {
 console.log('first .then handler');
 return result;
}).then(function(result) {
 console.log('second .then handler');
 console.log(result);
}).catch(function(error) {
 console.log(error);
});

When we have multiple .then handlers added, the return value of the previous .then handler is automatically passed to the next .then handler.

Result of promise chaining

As you can see, adding 4 + 5 resolves a promise and we get that sum in the first .then handler. There we're printing a log statement and return that sum to the next .then handler.

And inside the next .then handler, we're adding a log statement and then we're printing the result we got from the previous .then handler.

This way of adding multiple .then handlers is known as promise chaining.

How to Delay a Promise's Execution in JavaScript

Many times we don't want the promise to execute immediately. Rather, we want it to delay until after some operation is completed.

To achieve this, we can wrap the promise in a function and return that promise from that function like this:

function createPromise() {
 return new Promise(function(resolve, reject) {
  setTimeout(function() {
   const sum = 4 + 5;
   if(isNaN(sum)) {
     reject('Error while calculating sum.');
   } else {
    resolve(sum);
   }
  }, 2000);
 });
}

This way, we can use the function parameters inside the promise, making the function truly dynamic.

function createPromise(a, b) {
 return new Promise(function(resolve, reject) {
  setTimeout(function() {
   const sum = a + b;
   if(isNaN(sum)) {
     reject('Error while calculating sum.');
   } else {
    resolve(sum);
   }
  }, 2000);
 });
}

createPromise(1,8)
 .then(function(output) {
  console.log(output); // 9
});

// OR

createPromise(10,24)
 .then(function(output) {
  console.log(output); // 34
});

Result of delaying promise execution

Note: When we create a promise, it will be either resolved or rejected but not both at the same time. So we cannot add two resolve or reject function calls in the same promise.

Also, we can pass only a single value to the resolve or reject function.

If you want to pass multiple values to a resolve function, pass it as an object like this:

const promise = new Promise(function(resolve, reject) {
 setTimeout(function() {
  const sum = 4 + 5;
  resolve({
   a: 4,
   b: 5,
   sum
  });
 }, 2000);
});

promise.then(function(result) {
 console.log(result);
}).catch(function(error) {
 console.log(error);
});

Passing object to resolve function to return multiple values

How to Use Arrow Functions in JavaScript

In all the above code examples, we've used regular ES5 function syntax while creating promises.

But it's a common practice to use arrow function syntax instead of ES5 function syntax.

So let's first understand what is an arrow function and how to use it.

What are arrow functions?

Before ES6, there were two main ways of declaring functions.

1. Function Declaration Syntax:

function add(a, b) {
 return a + b;
}

2. Function Expression Syntax:

const add = function(a, b) {
 return a + b;
};

The main visible difference between the regular function and arrow function is the syntax of writing the function.

Using arrow function syntax, we can write the above adding function like this:

const add = (a, b) => {
 return a + b;
};

You might not see much difference here, apart from the arrow. But if we have a single line of code in the function body we can simplify the above arrow function like this:

const add = (a, b) => a + b;

Here we are implicitly returning the result of a + b, so there is no need for a return keyword if there is a single statement.

So using the arrow functions will make your code much shorter.

If you want to learn other features of arrow functions, you can check out this video.

Using an arrow function, we can write the previous code as shown below:

const promise = new Promise((resolve, reject) => {
 setTimeout(() => {
  const sum = 4 + 5 + 'a';
  if(isNaN(sum)) {
    reject('Error while calculating sum.');
  } else {
    resolve(sum);
  }
 }, 2000);
});

promise.then((result) => {
 console.log(result);
});

You can either use ES5 or ES6 function syntax depending on your preferences and needs.

How to Use Async/Await in JavaScript

In this section, we'll explore everything you need to know about async/await.

Async/await gives developers a better way to use promises.

To use async/await, you need to create a function and add the async keyword before the function name using ES5 function declaration syntax like this:

async function someFunction() {
  // function body
}

or using function expression syntax like this:

const someFunction = async function () {
  // function body
};

or using an arrow function like this:

const someFunction = async () => {
  // function body
};

Always remember that, when you add the async keyword to the function, it always returns a promise.

Take a look at the below code:

const sayHello = async function () {
  return 'Hello';
};

sayHello();

What do you think the output of the above code will be?

Result of calling function marked as async

The output is a promise fulfilled with the string Hello.

So the below code:

const sayHello = async function () {
  return 'Hello';
};

is the same as this:

const sayHello = function() {
 return new Promise((resolve, reject) => {
  resolve('Hello');
 });
}

which is the same as this:

const sayHello = function () {
  return Promise.resolve('Hello');
};

Promise.resolve('Hello') is just a shorter way of creating a promise which resolves to the string Hello.

So to get the actual string Hello, we need to add the .then handler like this:

sayHello().then(function (result) {
  console.log(result); // Hello
});

Getting result of async function using .then handler

Now, where do we use the await keyword?

It's used inside the function which is declared as async. So the await keyword should only be used inside the async function.

You will get an error if you try to use it in non-async functions.

Suppose, we have a promise which returns the product of two numbers like this:

function getProduct(a, b) {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      resolve(a * b);
    }, 1000);
  });
}

and we're using it like this:

getProduct(2, 4)
  .then(function (result) {
    getProduct(result, 2)
      .then(function (finalResult) {
        console.log('final_result', finalResult);
      })
      .catch(function (error) {
        console.log(error);
      });
  })
  .catch(function (error) {
    console.log(error);
  });

In the above code, we're first getting the product of 2 and 4. Then we're using that result to multiply it by 2 again, and then finally printing the product.

If you execute the above code, you will see the final result as 16 which is 2 4 = 8 and 8 2 = 16.

Result of nesting .then callback handlers

The above code of .then and .catch looks pretty complicated and difficult to understand at one glance.

So using async/await we can simplify the above code to this:

const printResult = async () => {
  try {
    const result = await getProduct(2, 4); // line 1
    const finalResult = await getProduct(result, 2); // line 2
    console.log('final_result', finalResult); // line 3
  } catch (error) {
    console.log(error);
  }
};

printResult();

This looks much cleaner and easy to understand.

Here, to use the await keyword, we're declaring a function with the async keyword. Then to get the result of each promise, we're adding the await keyword in front of it.

Also, note that we've added try/catch inside the function. You always need to add a try block around the code which uses await so the catch block will be executed if the promise gets rejected.

There is a very important thing you need to remember: The above async/await code will work exactly the same as when we use .then – so the next await line (line 2) will not be executed until the previous await call (line 1) is successful.

Therefore, as the getProduct function is taking 1 second to execute because of the setTimeout call, line 2 will have to wait for 1 second before executing the getProduct function again.

But there is one exception to this behavior, which you can check out in this article.

Also, if there is an error while executing line 1 (because of some error that occurred in the getProduct function), the next code after line 1 will not be executed. Instead, the catch block will be executed.

Now, if you compare the code of promise chaining and async/await, you will see the difference.

// code using async/await

const printResult = async () => {
  try {
    const product = await getProduct(2, 4); // line 1
    const finalResult = await getProduct(product, 2); // line 2
    console.log('final_result', finalResult); // line 3
  } catch (error) {
    console.log(error);
  }
};

printResult();

// code using .then and .catch

getProduct(2, 4)
  .then(function (result) {
    getProduct(result, 2)
      .then(function (finalResult) {
        console.log('final_result', finalResult);
      })
      .catch(function (error) {
        console.log(error);
      });
  })
  .catch(function (error) {
    console.log(error);
  });

As you can see, the code using async/await is much cleaner and easy to understand as compared to the promise chaining.

As the nesting gets deeper, the code using promise chaining gets more complicated. So async/await just provides a way to write the same code but with better clarity.

Using async/await also reduces the need of adding multiple .catch handlers to handle the errors.

We can avoid the nesting in the above promise chaining by writing the previous code like this:

getProduct(2, 4)
  .then(function (result) {
    return getProduct(result, 2);
  })
  .then(function (finalResult) {
    console.log('final_result', finalResult);
  })
  .catch(function (error) {
    console.log(error);
  });

Here, from the first .then handler, we're returning the result of getProduct(result, 2).

Whatever returned from the previous .then handler will be passed to the next .then handler.

As the getProduct function returns a promise so we can attach .then again to it and avoid the need for a nested .catch handler.

using promise chaining

But still async/await syntax looks cleaner and easier to understand than the promise chaining syntax.

Promise Methods

In this section, we'll explore the various methods provided by the Promise API.

All these methods are useful when you want to execute multiple asynchronous tasks at the same time when those tasks are not dependent on each other (which saves a lot of time).

Because if you execute each task one after the other, then you have to wait for the previous task to finish before you can start with the next task.

And if the tasks are not related to each other, there is no point in waiting for the previous task to finish before executing the next task.

The Promise.all method

This method is used to execute multiple asynchronous tasks simultaneously without having to wait for another task to finish.

Suppose we have three promises and all are resolved successfully:

const promise1 = new Promise((resolve, reject) => resolve('promise1 success'));
const promise2 = new Promise((resolve, reject) => resolve('promise2 success'));
const promise3 = new Promise((resolve, reject) => resolve('promise3 success'));

Now, let's use the Promise.all method.

Promise.all needs an array of promises as its argument.

Promise.all([promise1, promise2, promise3])
  .then((result) => {
    console.log('resolved', result); // resolved ["promise1 success", "promise2 success", "promise3 success"]
  })
  .catch((error) => {
    console.log('rejected', error);
  });

As all the promises are resolved, result will be an array containing the results of the resolved promises.

Now, what if any of the promises get rejected?

const promise1 = new Promise((resolve, reject) => resolve('promise1 success'));
const promise2 = new Promise((resolve, reject) => reject('promise2 failure'));
const promise3 = new Promise((resolve, reject) => resolve('promise3 success'));

Promise.all([promise1, promise2, promise3])
  .then((result) => {
    console.log('resolved', result);
  })
  .catch((error) => {
    console.log('rejected', error); // rejected promise2 failure
  });

In the above code, promise2 is rejected so the catch handler will be executed, and in the case of Promise.all:

• If one of the promises is rejected, the error will contain the error message of the failed promise (as in our case above)
• If multiple promises are rejected, the error will be the error message of the first failed promise.

Note: Even though the intermediate promise gets rejected, all next promises will not be stopped from executing. They will all be executed – but only the first rejected promise value will be available in the error parameter of the catch block.

The Promise.race method

Consider again the three resolved promises:

const promise1 = new Promise((resolve, reject) => resolve('promise1 success'));
const promise2 = new Promise((resolve, reject) => resolve('promise2 success'));
const promise3 = new Promise((resolve, reject) => resolve('promise3 success'));

Promise.race([promise1, promise2, promise3])
  .then((result) => {
    console.log('resolved', result); // resolved promise1 success
  })
  .catch((error) => {
    console.log('rejected', error);
  });

As you can see here, as soon as the first promise gets resolved, the Promise.race method will return the result of that resolved promise.

Now, take a look at the below code:

const promise1 = new Promise((resolve, reject) => reject('promise1 failure'));
const promise2 = new Promise((resolve, reject) => resolve('promise2 success'));
const promise3 = new Promise((resolve, reject) => resolve('promise3 success'));

Promise.race([promise1, promise2, promise3])
  .then((result) => {
    console.log('resolved', result);
  })
  .catch((error) => {
    console.log('rejected', error); // rejected promise1 failure
  });

As you can see here, the first promise itself is rejected so the .catch handler will be executed.

So when we use the Promise.race method, it will wait until the first promise gets resolved or rejected and then:

• If the first promise in the promise chain gets resolved, the .then handler will be executed and the result will be the result of the first resolved promise.
• If the first promise in the promise chain gets rejected, the .catch handler will be executed and the result will be the result of the first failed promise.
• If multiple promises are rejected, the .catch handler will be executed and the result will be the result of the first failed promise.

The Promise.allSettled method

This method is useful when you want to know the result of each task even though they are rejected.

Because in Promise.all and Promise.race, we get only the result of the first rejected promise and there is no way to get the result of other successful or failed promises.

So using Promise.allSettled we can get the result of all the promises, even if they failed.

Take a look at the below code:

const promise1 = new Promise((resolve, reject) => resolve('promise1 success'));
const promise2 = new Promise((resolve, reject) => resolve('promise2 success'));
const promise3 = new Promise((resolve, reject) => resolve('promise3 success'));

Promise.allSettled([promise1, promise2, promise3]).then((result) => {
  console.log('resolved', result);
});

/* output from `.then`:
resolved [
  {
    "status": "fulfilled",
    "value": "promise1 success"
  },
  {
    "status": "fulfilled",
    "value": "promise2 success"
  },
  {
    "status": "fulfilled",
    "value": "promise3 success"
  }
]
*/

As you can see, the Promise.allSettled method waits until all the promises are resolved or rejected and the result will contain the result of each promise.

const promise1 = new Promise((resolve, reject) => reject('promise1 failure'));
const promise2 = new Promise((resolve, reject) => resolve('promise2 success'));
const promise3 = new Promise((resolve, reject) => resolve('promise3 success'));

Promise.allSettled([promise1, promise2, promise3]).then((result) => {
  console.log('resolved', result);
});

/* output from `.then`:
resolved [
  {
    "status": "rejected",
    "reason": "promise1 failure"
  },
  {
    "status": "fulfilled",
    "value": "promise2 success"
  },
  {
    "status": "fulfilled",
    "value": "promise3 success"
  }
]
*/

In the above case, even though the first promise is rejected, we get the result of all the promises inside the .then handler.

const promise1 = new Promise((resolve, reject) => reject('promise1 failure'));
const promise2 = new Promise((resolve, reject) => reject('promise2 failure'));
const promise3 = new Promise((resolve, reject) => reject('promise3 failure'));

Promise.allSettled([promise1, promise2, promise3]).then((result) => {
  console.log('resolved', result);
});

/* output from `.then`:
 resolved [
  {
    "status": "rejected",
    "reason": "promise1 failure"
  },
  {
    "status": "rejected",
    "reason": "promise2 failure"
  },
  {
    "status": "rejected",
    "reason": "promise3 failure"
  }
] 
*/

Here, even though all the promises are rejected, still the .then handler will be executed and we get the result of each promise.

Want to learn how to use these promise methods in an actual React application? Check out my previous article.

Thanks for Reading!

That's it for this tutorial. I hope you learned a lot from it.

Want a video version of this tutorial, check out my YouTube playlist.

If you want to master JavaScript, ES6+, React and Node.js with easy-to-understand content, do check out my YouTube channel and don't forget to subscribe.

Want to stay up to date with regular content regarding JavaScript, React, Node.js? Follow me on LinkedIn.

So let's get started.

What We'll Cover:

1. Why Do You Need to Write Unit Tests?
2. What is the React Testing Library?
3. What Not to Test with the Testing Library
4. How to Setup a React Project with Vite
5. How to Set Up the Testing Library and Jest in a React Project
6. How to Create the UI for Testing
7. How to Write Unit Test Cases
8. Let's Write Some More Tests
9. Conclusion

If you want to learn the React Testing Library in depth from scratch, you can check out my MERN stack course.

Why Do You Need to Write Unit Tests?

You might think that you don't need to write so many unit test cases and that it's a waste of time. Perhaps you can manually test the application instead.

Well, you're right – you can certainly do that. But as the application grows, it might be difficult to test all the scenarios in the application and you might miss something. Even a small change might break the application if all the major functionality is not tested properly.

That's why I recommend writing unit test cases covering all those scenarios which you're manually going through as a user.

So by executing just a single command you will be able to know if something is broken in your application or if some test is failing.

What is the React Testing Library?

The React Testing Library has a set of packages that help you test UI components in a user-centric way. This means it tests based on how the user interacts with the various elements displayed on the page.

So what happens is when the user clicks any button or types in any of the input textboxes, that interaction is tested using this testing library.

So instead of the user doing this testing manually (which takes a lot of time, and the user might miss testing certain scenarios when the application grows), the testing is done by writing unit test cases and executing them by just a single command.

What Not to Test with the Testing Library

Testing Library encourages you to avoid testing implementation details like the internals of a component you're testing.

The guiding principles of this library emphasize a focus on tests that closely resemble how users interact with your web pages.

You may want to avoid testing the following implementation details:

• Internal state of a component
• Internal methods of a component
• Lifecycle methods of a component
• Child components

So if you have experience with enzyme testing, you might be checking the value of state once you click any button or you might be checking the prop value If something changes.

But these types of checks are not necessary for testing with the React testing library. Instead, in the React testing library, you check the behavior of the DOM when the user clicks on a button or submits a form and so on.

How to Setup a React Project with Vite

To set up our app that we'll test, we'll be using Vite. It's a popular and faster alternative to create-react-app.

We'll use Vite because create-react-app becomes slow when the application grows and takes a lot of time to refresh the page when we make any changes in the application code. Also, by default, it also adds a lot of extra packages which we rarely need.

Vite just rebuilds the things we changed, instead of rebuilding the entire application which saves a lot of time during development.

Keep in mind that Vite requires Node.js version 14.18+, so make sure to install a Node version greater than or equal to 14.18.

The easiest and simplest way to install and switch Node.js versions is to use nvm.

Even if you're using create-react-app, all the tests you will learn in this tutorial should run exactly the same without any errors.

To create a new Vite project with React, execute the npm init vite command from the terminal.

It will ask you the project name, framework, and variant.

• For project name, you can enter testing-library-demo or any name of your choice.
• For framework, select React from the list of options
• For variant, select JavaScript from the list of options

Create a new React project using Vite

Once the project is created, you can open that project in your favorite IDE.

The project folder structure will look like this:

Folder structure of React Vite project

Now, execute the yarn or npm install command to install all the packages from the package.json file.

Once all the packages are installed, you can execute the yarn run dev or npm run dev command to start the created React application.

Running a React app

Now, if you access the displayed URL http://127.0.0.1:5173/ you will be able to see the default React application created using Vite.

Default React page rendered using Vite

So let's see how we can set up the Testing Library in our Vite project.

How to Set Up the Testing Library and Jest in a React Project

You can't just use the testing library alone – you also need to install Jest. It exposes an extensively used global expect function and other things which help you make assertions in your test cases.

To set up Testing library and Jest, you need to install the Jest and Testing Library packages as dev dependencies.

So execute the following command from the testing-library-demo folder:

yarn add @testing-library/jest-dom@5.16.5 @testing-library/react@13.4.0 @testing-library/user-event@14.4.3 jest@29.3.1 jest-environment-jsdom@29.3.1 vitest@0.25.3 --dev

or with npm:

npm install @testing-library/jest-dom@5.16.5 @testing-library/react@13.4.0 @testing-library/user-event@14.4.3 jest@29.3.1 jest-environment-jsdom@29.3.1 vitest@0.25.3 --save-dev

I'm mentioning versions here for each package which are the latest versions at the time of writing this tutorial. So even if there is a newer breaking version release that happens for any of the packages in the future, your code will not break.

Here, we're installing the jest-environment-jsdom library because we will be running tests in the node environment. But we're testing browser interactions through the DOM – so to inform Jest about that, we need to add this library.

The @testing-library/jest-dom library is required because it contains assertions like toBeInTheDocument, toHaveBeenCalled, and others which make it easy to test for DOM elements, which you will see later in this tutorial.

We have also added the vitest package which is only required when you're using Vite for the application.

You don't need it if you're using create-react-app or your own webpack configuration.

Now that we have installed the required packages, let's add a script in the package.json file to run the tests.

Open the package.json file and add the test script inside it like this:

"test": "vitest"

Your package.json file will look like this now:

Package.json file preview

If you're not using vite for creating the React app, then you will be using the following test script:

"test": "jest --watch"

Now, create a new file in the root of your project (testing-library-demo) with the name setupTests.js and add the following code inside it:

import "@testing-library/jest-dom";

Now, open the vite.config.js file and add a new test object as shown in the below screenshot:

vite.config.js file configuration

How to Create the UI for Testing

Before writing tests, we need to have some components to test.

So let's create a simple registration page with some checkboxes, input fields, select dropdown, and buttons so we can write test cases for it.

We will use react-bootstrap to create the UI elements so we don't have to write all the CSS from scratch.

Install bootstrap and react-bootstrap by executing the following command from the terminal:

yarn add bootstrap@5.2.3 react-bootstrap@2.6.0 react-select@5.6.1

or with npm:

npm install bootstrap@5.2.3 react-bootstrap@2.6.0 react-select@5.6.1

Bootstrap provides a base CSS which we need for the UI to look nice, so we're also installing Bootstrap along with react-bootstrap.

Once installed, open src/main.jsx and add an import for the Bootstrap CSS file before any of your other CSS files as shown below:

import "bootstrap/dist/css/bootstrap.min.css";

Your src/main.jsx file will look like this now:

bootstrap css imported

We don't need the index.css and App.css files so you can delete them.

Now, create a components folder inside the src folder and create a register folder inside the components folder. Inside the register folder, create Register.jsx and register.css files.

So your Register.js file path will be src/components/register/Register.js.

Add the content from this repo in the Register.jsx file and inside register.css file add contents from this repo.

Now, open the App.jsx file and add the following contents inside it:

import Register from "./components/Register";

function App() {
  return <Register />;
}

export default App;

Now, if you run the application by executing the yarn run dev or npm run dev command, you will see the following screen:

Registration page

This tutorial is focused on the testing library, so I'm not going to explain the code from the Register.js file as it's basic React code. But If you're not familiar with React hooks, you can check out this article to understand it better.

Also, instead of managing the state and onChange handler yourself, you can use the very popular react-hook-form library.

It also allows you to add validations to your code without writing much code. Check out this article if you want to learn about it in detail.

Now, we're all set to write unit test cases, so let's get started.

How to Write Unit Test Cases

Before writing test cases, you should be aware of the different queries which you can make to access elements on the page.

The Testing Library provides a set of queries which you can see in the below screenshot:

Screenshot showing getBy, queryBy, findBy, getAllBy, queryAllBy, and findAllBy queries. (Source)

To summarise:

• To select a single DOM element, you can use the getBy, findBy, or queryBy query
• To select multiple DOM elements, you can use the getAllBy, findAllBy or queryAllBy query
• getBy and findBy return an error if there is no match or more than one match
• queryBy returns null if there is no match and returns an error if there is more than one match
• findBy works well with asynchronous code but not with getBy and queryBy
• getAllBy returns an error if there is no match and returns an array of matches for one or more than one match
• findAllBy returns an error if there is no match and returns an array of matches for one or more than one match
• queryAllBy returns an empty array for no match and returns an array of matches for one or more than one match

So if you don't want your test to fail if the element is not displayed on the UI, then always use queryBy or queryAllBy.

In other words, only use the queryBy or queryAllBy queries for asserting that an element cannot be found or is hidden.

Now that you're familiar with query methods, let's start writing test cases for the Register component.

Create a new register.test.jsx file in the src/components/register folder with the following content inside it:

import { render, screen } from "@testing-library/react";
import Register from "./Register";

describe("Register component", () => {
  it("should render Register component correctly", () => {
    render(<Register />);
    const element = screen.getByRole("heading");
    expect(element).toBeInTheDocument();
  });
});

Note that we're using Vite so the filename has to end with the .jsx extension even for test files. If you're not using vite then you can end the filename with the .js extension.

Now, if you execute the npm run test or yarn run test command you will see that the test passes.

one test passed

In the above code, we're first rendering the Register component using the render method provided by the testing library.

As we have an h1 element with Register text in the Register component, we're using the screen.getByRole method to get the DOM element of the role heading.

If you don't know what role to use in the getByRole method, then you can use some random name and the testing library will show you all the available roles for each DOM element for that component as shown below:

Seeing the DOM structure of UI elements

Once we get that element using the getByRole method, then we're making an assertion to check if that element exists in the DOM using:

expect(element).toBeInTheDocument();

You can see a list of all available getBy,findBy or queryBy methods by adding a dot after screen like this:

Methods provided by screen object

Now, we have added one test to check if the Register component is getting rendered correctly or not.

Let's write some more tests.

If you run the application by running the yarn dev command, you will see that, once you click on the Register button without filling out all the details, you get an error message as shown below.

Error message display on submitting form without entering data

So now, we need to test the same by writing a test case.

For that, we can use userEvent from the @testing-library/user-event package which we've already installed.

Now, add a new test in your register.test.jsx file as shown below:

it("should show error message when all the fields are not entered", () => {
    render(<Register />);
    const buttonElement = screen.getByRole("button");
    userEvent.click(buttonElement);
});

Your register.test.jsx file will look like this:

New test added for testing error message display

So we're triggering the click event for the Register button in the above code.

Now, we need to find the element with the error message so we can add assertions for it in the test.

The error message is actually an Alert component from react-bootstrap which is not visible initially. It's only displayed when we submit the form without filling in all the data.

In such a case, we can call the screen.debug method to see the structure of the DOM at that moment when we trigger the click event.

So change the test case as shown below:

it("should show error message when all the fields are not entered", async () => {
    render(<Register />);
    const buttonElement = screen.getByRole("button");
    userEvent.click(buttonElement);
    screen.debug();
});

Note that we have added screen.debug at the end of the test.

Now, if you run the yarn run test or npm run test, you will see the following DOM structure:

DOM structure when after submitting the Form

As you can see from the screenshot, you directly see the name input label inside the form tag after the Register heading.

So we're not able to see the error message even if we have triggered the click event for the button.

This is because it takes some time to execute the validation code from the handleFormSubmit method. Before that we're only using the screen.debug method so we don't see the error message.

So to fix this, we can wait using async/await.

So declare the test function as async and before the userEvent.click(buttonElement) add an await keyword like this:

Added async/await

Now, if you check the console, you will be able to see the text All the fields are required. inside a div with the role alert.

Error message getting displayed in DOM structure

So we can use it in our assertion like this:

const alertElement = screen.getByRole("alert");
expect(alertElement).toBeInTheDocument();

And now, you can see that the second test is also successful.

test passed

Some points to note:

• Always remember to remove the screen.debug statement once you're done with your assertions, and never keep it in your code.
• Always add an await keyword before triggering any event using userEvent as you may not know when the action will be completed.

Let's Write Some More Tests

Now that we're done with adding these two tests, we can add one more test to check if there is no error when the page is loaded like this:

it("should not show any error message when the component is loaded", () => {
    render(<Register />);
    const alertElement = screen.getByRole("alert");
    expect(alertElement).not.toBeInTheDocument();
});

Here, instead of using this:

expect(alertElement).toBeInTheDocument();

we're using this:

expect(alertElement).not.toBeInTheDocument();

Because we want the alert element to be not present on the component load.

But if you check the console, you will see that the test is failing.

Failed test when using getByRole

So, the test is not failing because of our assertion. Rather, it's failing because it can't find an element with role alert on page load which is expected, as there will not be any error on page load.

But how we can make the test pass?

If you remember from the list of queries in the screenshot shown before:

Screenshot showing getBy, queryBy, findBy, getAllBy, queryAllBy, and findAllBy queries.

The getBy method throws an error if it does not find the matching element. So instead of using getBy we need to use queryBy. It does the same thing but it does not throw an error when there is no matching element.

So let's modify our test case to the below code:

it("should not show any error message when the component is loaded", async () => {
    render(<Register />);
    const alertElement = screen.queryByRole("alert");
    expect(alertElement).not.toBeInTheDocument();
});

Now, if you check the console, you will see that the test passes successfully.

Passed test when using queryByRole

Now, let's write a test for successful registration when we fill out all the required fields.

it("should show success message when the registration is successful.", async () => {
    render(<Register />);
    const buttonElement = screen.getByRole("button");
    await userEvent.click(buttonElement);
    const alertElement = screen.getByRole("alert");
    expect(alertElement).toBeInTheDocument();
});

Now if you see the console, you will see that the test passes successfully.

Let's add a subheading to the registration page and see what happens when we run the tests again.

Add the following heading inside the Form tag in the Register.jsx file:

<h6 className="subtitle">
   Please enter your details below to register yourself.
</h6>

So your code will now look like this:

Added new subheading

Now, if you run the tests again, you will see that one test fails:

Failed test due to multiple headings on the page

The test failed because in the first test we're finding the Register heading text as shown below:

screen.getByRole("heading")

And as you know, getBy returns an error when you have more than one match.

Here, we have two headings on the Register component so the test failed.

So how can we fix it?

To fix it we need to identify how to accurately select elements while writing tests.

I have seen many developers changing the HTML structure by adding some testid so they can get the test passed like this:

it("should render Register component correctly", () => {
    render(<Register />);
    const element = screen.getByTestId("title");
    expect(element).toBeInTheDocument();
});

Assuming you added an extra data-testid attribute to your JSX like this:

<h2 className="title" data-testid="title">
     Register
</h2>

This will work and make your all tests pass. But this is not the correct way.

Just to make your test pass, you should not change your JSX by adding some extra testid or class.

Instead, you should always try to use methods provided by screen to make an accurate selection of DOM elements.

So now the question is how to make an accurate selection.

The getByRole method accepts optional options which you can use like this:

const element = screen.getByRole("heading", { level: 2 });

As our main Register heading is a h2 heading, we specifically said to select level 2 heading.

Now, if you update the first test case, you will see that all the tests are passing.

Test passed by adding more specific query for heading

Now, let's add another test for testing the subheading.

As the subheading is of level 6, you can query it like this:

const element = screen.getByRole("heading", { level: 6 });

This will work, but there is another way we can target that element.

For that, you can install the testing playground Chrome browser extension.

Once it's installed, follow the below steps:

• open your Chrome dev tools using Ctrl + Alt + I or Cmd + Option + I (Mac)
• select the Testing Playground tab
• Click the cursor pointer and select the subheading of the Register component as shown below:

Testing Playground extension demo

As you can see, you will get the accurate DOM element query which you can use in your test like this:

screen.getByRole('heading', {
  name: /please enter your details below to register yourself\./i
})

So you can write your test like this:

 it("should test for presence of subheading in the component", () => {
    render(<Register />);
    const element = screen.getByRole("heading", {
      name: /please enter your details below to register yourself\./i
    });
    expect(element).toBeInTheDocument();
 });

Test result

Writing a test case for subheading is not necessary, because it does not affect the component behavior even if you don't test that. But just to show you how your tests will break for multiple elements, I have added that element on the UI along with its test case.

The Testing Playground Chrome extension is really useful to find out the exact matching query for any of the UI elements.

So instead of using the screen.debug method to see the DOM structure, you can use this Chrome extension to find out the role and other information for all the displayed elements as can be seen below:

Finding out specific query using testing playground

As you can see, you can get any element by role, by placeholder text, or by label text with the methods provided by screen.

Now that you're aware of the more specific query selectors, let's update other test cases to use the specific selectors.

Wherever we're using just screen.getByRole("button"), replace it with the following:

screen.getByRole("button", {
  name: /register/i
})

So now, if later someone adds another button in the same component, your test will not fail.

Your final register.test.jsx file will look like this:

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import Register from "./Register";

describe("Register component", () => {
  it("should render Register component correctly", () => {
    render(<Register />);
    const element = screen.getByRole("heading", {
      level: 2
    });
    expect(element).toBeInTheDocument();
  });

  it("should test for presence of subheading in the component", () => {
    render(<Register />);
    const element = screen.getByRole("heading", {
      name: /please enter your details below to register yourself\./i
    });
    expect(element).toBeInTheDocument();
  });

  it("should show error message when all the fields are not entered", async () => {
    render(<Register />);
    const buttonElement = screen.getByRole("button", {
      name: /register/i
    });
    await userEvent.click(buttonElement);
    const alertElement = screen.getByRole("alert");
    expect(alertElement).toBeInTheDocument();
  });

  it("should not show any error message when the component is loaded", () => {
    render(<Register />);
    const alertElement = screen.queryByRole("alert");
    expect(alertElement).not.toBeInTheDocument();
  });

  it("should show success message when the registration is successful.", async () => {
    render(<Register />);
    const buttonElement = screen.getByRole("button", {
      name: /register/i
    });
    await userEvent.click(buttonElement);
    const alertElement = screen.getByRole("alert");
    expect(alertElement).toBeInTheDocument();
  });
});

Conclusion

React Testing library is amazing and has become a very popular tool with which to test React applications.

Just remember that unlike enzyme testing library, you should not test for state changes when using React Testing Library.

So we have not written test cases to check if the state correctly changes after the user types some text in the name, email, or password fields.

In React Testing Library you check the behavior of DOM when the user clicks on a button or submits a form and so on instead of testing the internal state of the component.

Thanks for Reading!

You can find the complete source code for this tutorial in this repository.

If you want to become the best MERN stack developer (full stack developer), then do check out my course.

• This is a pre-recorded video course that will be constantly updated for any future changes.
• In this course, you will learn how to create React and Node.js applications from scratch and build an amazing online learning platform.
• After learning through this course, you will be able to build any MERN stack application confidently and easily.
• There is a separate section in this course, where you will learn how to test your entire React application using React testing library and jest.

So do check out this amazing course.

Want to stay up to date with regular content regarding JavaScript, React, Node.js? Follow me on LinkedIn.

For simple forms, things are generally manageable. But as your form gets more complex and you need to add various validations, it becomes a complicated task.

So instead of manually writing all of the code and handling complex forms with validation logic, we can use the most popular React library for this, react-hook-form.

It's the most popular React library for creating forms compared to formik, react final form, and others, and I use it for all my client projects.

In this article, we will explore how to use the react-hook-form library in detail.

So let's get started.

Why the react-hook-form Library is the Most Popular Form Library in React

Following are some of the reasons why react-hook-form is a popular choice for creating React forms.

• The number of re-renders in the application is smaller compared to the alternatives because it uses refs instead of state.
• The amount of code you have to write is less as compared to formik, react-final-form and other alternatives.
• react-hook-form integrates well with the yup library for schema validation so you can combine your own validation schemas.
• Mounting time is shorter compared to other alternatives.

Check out the react-hook-form website for more detailed comparison.

How to Create a Form Without Using a Library

Before creating a form using the react-hook-form library, let's create a simple form without using any library.

Take a look at the below code:

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [state, setState] = useState({
    email: "",
    password: ""
  });

  const handleInputChange = (event) => {
    const { name, value } = event.target;
    setState((prevProps) => ({
      ...prevProps,
      [name]: value
    }));
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(state);
  };

  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        <div className="form-control">
          <label>Email</label>
          <input
            type="text"
            name="email"
            value={state.email}
            onChange={handleInputChange}
          />
        </div>
        <div className="form-control">
          <label>Password</label>
          <input
            type="password"
            name="password"
            value={state.password}
            onChange={handleInputChange}
          />
        </div>
        <div className="form-control">
          <label></label>
          <button type="submit">Login</button>
        </div>
      </form>
    </div>
  );
}

Here's a Code Sandbox demo.

In the above code, we have only two input fields, namely email and password and a submit button.

Each input field has a value and onChange handler added so we can update the state based on the user's input.

Also, we have added a handleSubmit method which displays the data entered in the form to the console.

This looks fine. But what if we need to add validations like required field validation, minimum length validation, password validation, email field validation and also display the corresponding error messages?

The code will become more complex and lengthy as the number of input fields and their validations increases.

How to Install react-hook-form

Displaying forms is a very common requirement in any application.

So let’s learn why and how to use react-hook-form. For that, we'll create a new React application.

Create a new React project by running the following command from the terminal:

create-react-app demo-react-hook-form

Once the project is created, delete all files from the src folder and create new index.js and styles.css files inside the src folder.

To install the react-hook-form library, execute the following command from the terminal:

npm install react-hook-form@7.38.0

OR

yarn add react-hook-form@7.38.0

Here, we're installing version 7.38.0 of the react-hook-form library which is the latest version at the time of writing this article.

How to Create Initial Pages

Open the src/index.js file and add the following content inside it:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

Note that the above code is using React version 18+ syntax for rendering the app.

If you're using React version less than 18 (which you can confirm from the package.json file), then add the following code in your src/index.js file.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

Now, open the src/styles.css file and add the content from here inside it.

Now, create a new file called App.js inside the src folder with the following content:

import React from "react";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <form>
        <div className="form-control">
          <label>Email</label>
          <input type="text" name="email" />
        </div>
        <div className="form-control">
          <label>Password</label>
          <input type="password" name="password" />
        </div>
        <div className="form-control">
          <label></label>
          <button type="submit">Login</button>
        </div>
      </form>
    </div>
  );
}

Here, we have just added the email and password fields to the form.

How to Create a Basic Form with react-hook-form

The react-hook-form library provides a useForm hook which we can use to work with forms.

Import the useForm hook like this:

import { useForm } from 'react-hook-form';

You can use the useForm hook like this:

const {
  register,
  handleSubmit,
  formState: { errors },
} = useForm();

Here,

• register is a function provided by the useForm hook. We can assign it to each input field so that the react-hook-form can track the changes for the input field value
• handleSubmit is the function we can call when the form is submitted
• errors is a nested property in the formState object which will contain the validation errors, if any

Now, replace the contents of the App.js file with the following code:

import React from "react";
import { useForm } from "react-hook-form";
import "./styles.css";

export default function App() {
  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <div className="App">
      <form onSubmit={handleSubmit(onSubmit)}>
        <div className="form-control">
          <label>Email</label>
          <input type="text" name="email" {...register("email")} />
        </div>
        <div className="form-control">
          <label>Password</label>
          <input type="password" name="password" {...register("password")} />
        </div>
        <div className="form-control">
          <label></label>
          <button type="submit">Login</button>
        </div>
      </form>
    </div>
  );
}

In the above code, we have added a register function to each input field that we got from the useForm hook by passing a unique name to each register function like this:

{...register("email")}

We're using the spread operator so react-hook-form will spread out all the required event handlers like onChange, onBlur, and other props for that input field.

If you add a console.log({ ...register("email") }); inside the component, you will see what it returns as can be seen below:

We also added the onSubmit function which is passed to the handleSubmit method like this:

<form onSubmit={handleSubmit(onSubmit)}>
...

Note that, you need to pass a unique name to the register function added for each input field so react-hook-form can track the changing data.

When we submit the form, the handleSubmit function will handle the form submission. It will send the user entered data to the onSubmit function where we're logging the user data to the console.

const onSubmit = (data) => {  
 console.log(data);
};

Now, start the application by running the npm start or yarn start command and you will see the following screen:

Here's a Code Sandbox demo.

As you can see, when we submit the form, the details entered by the user are displayed in the console.

Also, as compared to the code without react-hook-form (which we saw at the start of this article in this Code Sandbox demo), this code is much simpler.

This is because we don’t have to add the value and onChange handler for each input field and there is no need to manage the application state ourselves.

How to Add Validations to the Form

Now, let’s add the required field and minimum length validation to the input fields.

To add validation we can pass an object to the register function as a second parameter like this:

<input
  type="text"
  name="email"
  {...register("email", {
    required: true
  })}
/>

<input
  type="password"
  name="password"
  {...register("password", {
    required: true,
    minLength: 6
  })}
/>

Here, for the email field, we're specifying required field validation. For the password field we're specifying the required field and minimum 6 character length validation.

When the validation fails, the errors object coming from the useForm hook will be populated with the fields for which the validation failed.

So we will use that errors object to display custom error messages.

Open the App.js file and replace its contents with the following content:

import React from "react";
import { useForm } from "react-hook-form";
import "./styles.css";

export default function App() {
  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <div className="App">
      <form onSubmit={handleSubmit(onSubmit)}>
        <div className="form-control">
          <label>Email</label>
          <input
            type="text"
            name="email"
            {...register("email", {
              required: true,
              pattern: /^[^@ ]+@[^@ ]+\.[^@ .]{2,}$/
            })}
          />
          {errors.email && errors.email.type === "required" && (
            <p className="errorMsg">Email is required.</p>
          )}
          {errors.email && errors.email.type === "pattern" && (
            <p className="errorMsg">Email is not valid.</p>
          )}
        </div>
        <div className="form-control">
          <label>Password</label>
          <input
            type="password"
            name="password"
            {...register("password", {
              required: true,
              minLength: 6
            })}
          />
          {errors.password && errors.password.type === "required" && (
            <p className="errorMsg">Password is required.</p>
          )}
          {errors.password && errors.password.type === "minLength" && (
            <p className="errorMsg">
              Password should be at-least 6 characters.
            </p>
          )}
        </div>
        <div className="form-control">
          <label></label>
          <button type="submit">Login</button>
        </div>
      </form>
    </div>
  );
}

If you check the application now, you will see the following screen:

Here's a Code Sandbox demo.

As you can see, we're getting instant validation errors for each input field once we submit the form and then try to enter the values in the input fields.

If there is any error for any of the input field, the errors object will be populated with the type of error which we're using to display our own custom error message like this:

{errors.email && errors.email.type === "required" && (
    <p className="errorMsg">Email is required.</p>
)}
{errors.email && errors.email.type === "pattern" && (
    <p className="errorMsg">Email is not valid.</p>
)}

Here, based on the type of error, we're displaying different error messages.

Using the ES11 optional chaining operator, you can further simplify the above code like this:

{errors.email?.type === "required" && (
    <p className="errorMsg">Email is required.</p>
)}
{errors.email?.type === "pattern" && (
    <p className="errorMsg">Email is not valid.</p>
)}

In the similar way, we have added the password field validation.

Also, as you can see, each input field is automatically focused when we submit the form if there is any validation error for that input field.

Also, the form is not submitted as long as there is a validation error. If you check the browser console, you will see that the console.log statement is only printed if the form is valid and there are no errors.

So using react-hook-form reduced the amount of code that we had to write. The validation is also responsive, so once the field becomes valid, the error message goes away instantly.

But as the number of validations for each field increases, the conditional checks and error message code will still increase. So we can further refactor the code to make it even simpler.

Take a look at the below code:

import React from "react";
import { useForm } from "react-hook-form";
import "./styles.css";

export default function App() {
  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <div className="App">
      <form onSubmit={handleSubmit(onSubmit)}>
        <div className="form-control">
          <label>Email</label>
          <input
            type="text"
            name="email"
            {...register("email", {
              required: "Email is required.",
              pattern: {
                value: /^[^@ ]+@[^@ ]+\.[^@ .]{2,}$/,
                message: "Email is not valid."
              }
            })}
          />
          {errors.email && <p className="errorMsg">{errors.email.message}</p>}
        </div>
        <div className="form-control">
          <label>Password</label>
          <input
            type="password"
            name="password"
            {...register("password", {
              required: "Password is required.",
              minLength: {
                value: 6,
                message: "Password should be at-least 6 characters."
              }
            })}
          />
          {errors.password && (
            <p className="errorMsg">{errors.password.message}</p>
          )}
        </div>
        <div className="form-control">
          <label></label>
          <button type="submit">Login</button>
        </div>
      </form>
    </div>
  );
}

In the code above, we have changed the email and password validation code.

For the email input field, we changed this previous code:

 {...register("email", {
     required: true,
     pattern: /^[^@ ]+@[^@ ]+\.[^@ .]{2,}$/
 })}

to the below code:

{...register("email", {
    required: "Email is required.",
    pattern: {
        value: /^[^@ ]+@[^@ ]+\.[^@ .]{2,}$/,
        message: "Email is not valid."
    }
})}

Here, we’ve directly provided the error message we want to display while adding the validation itself.

So we no longer need to add extra checks for each validation. We are displaying the error message using the message property available inside the errors object for each input field like this:

{errors.email && <p className="errorMsg">{errors.email.message}</p>}

So by doing it this way, the code is further simplified which makes it easy to add extra validations in the future.

Note that, if there are validation errors, the onSubmit handler will not be executed and the corresponding input field will automatically be focused (which is a good thing).

Here's an updated Code Sandbox demo.

How to Add a Multiple Validations

You can even provide multiple validations for the input field by adding a validate object. This is useful if you need to perform complex validations like this:

 <input
    type="password"
    name="password"
    {...register("password", {
        required: true,
        validate: {
            checkLength: (value) => value.length >= 6,
            matchPattern: (value) =>
            /(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s)(?=.*[!@#$*])/.test(
                value
            )
        }
    })}
/>

and to display the error messages, we use it like this:

{errors.password?.type === "required" && (
    <p className="errorMsg">Password is required.</p>
)}
{errors.password?.type === "checkLength" && (
    <p className="errorMsg">
        Password should be at-least 6 characters.
    </p>
)}
{errors.password?.type === "matchPattern" && (
    <p className="errorMsg">
        Password should contain at least one uppercase letter, lowercase
letter, digit, and special symbol.
    </p>
)}

Here's a Code Sandbox demo.

How to Reset the Form Values

Sometimes, we need to reset/clear the data entered by the user after some action.

For example, once the form is submitted, we want to show the success message and then clear the form data so the user should not re-submit the same data.

In such a case, we can call the reset function returned by the useForm hook to clear the form data.

const { reset } = useForm();

Here's a Code Sandbox demo.

The reset function also accepts an optional object where you can pass the values you want the form data to reset:

reset({
    username: "Alex",
    email: "alex@example.com",
    password: "Test@123"
});

Here, the key username, email or password should match with the name passed to the register function so the respective input field will be set to the passed value.

How to Set Initial Form Values Using defaultValues

The useForm hook accepts a list of options, one of which is defaultValues.

Using defaultValues we can set initial values for the form elements and re-set them when moving from one page to another like this:

const { user } = props;
const {
    register,
    handleSubmit,
    formState: { errors }
} = useForm({
   defaultValues: {
      first_name: user.first_name,
      last_name: user.last_name
    }
});

// JSX

<Form.Control
    type="text"
    {...register("first_name")}
/>

<Form.Control
    type="text"
    {...register("last_name")}
/>

In the above code, for the register function we've passed first_name as the name. This means that in the defaultValues we're using the same name to set the initial value.

So to correctly set the input value, you need to use the same name used in the register function for setting the initial value using defaultValues.

Here's a Code Sandbox demo.

How to Use react-hook-form with Other Libraries

Sometimes, we might be using some external libraries like react-select to allow multiple selection in a dropdown.

In such cases, we can't directly add the register function for showing the select dropdown. So If we want to add react-hook-form validations without writing our own code and handler function, we can use the Controller component from react-hook-form like this:

import React from "react";
import { useForm, Controller } from "react-hook-form";
import Select from "react-select";
import "./styles.css";

const departments = [
  { value: "Computer-Science", label: "Computer Science" },
  { value: "Physics", label: "Physics" },
  { value: "Chemistry", label: "Chemistry" },
  { value: "Mathematics", label: "Mathematics" }
];

export default function App() {
  const {
    control,
    handleSubmit,
    formState: { errors }
  } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <div className="App">
      <form onSubmit={handleSubmit(onSubmit)}>
        <div className="form-control">
          <label>Select Department of Interest</label>
          <Controller
            name="department"
            control={control}
            rules={{ required: true }}
            render={({ field }) => (
              <Select {...field} isMulti options={departments} />
            )}
          />
          {errors.department && (
            <p className="errorMsg">This is a required field.</p>
          )}
        </div>
        <div className="form-control">
          <label></label>
          <button type="submit">Submit</button>
        </div>
      </form>
    </div>
  );
}

Here's a Code Sandbox demo.

As you can see in the above code, we're importing the Controller component at the top:

import { useForm, Controller } from "react-hook-form";

and control from useForm hook like this:

const {
    control,
    handleSubmit,
    formState: { errors }
  } = useForm();

Note, we're not using the register function here.

Regular use of the react-select library to allow multiple selection goes like this:

import Select from "react-select";

// use
<Select isMulti options={options} />

But to use it with react-hook-form we need to wrap it in the Controller component:

<Controller
    name="department"
    control={control}
    rules={{ required: true }}
    render={({ field }) => (
       <Select {...field} isMulti options={options} />
    )}
 />

Here, we have to give a unique value for the name prop in the Controller.

The validations are added as a part of the rules prop and we use the render prop to render the Select dropdown.

How to Use Other Input Types with react-hook-form

In this section, we'll see how to use radio buttons and checkboxes with react-hook-form.

Take a look at the below code:

import React from "react";
import { Button, Form } from "react-bootstrap";
import { useForm } from "react-hook-form";
import "./styles.css";

export default function App() {
  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <div className="container">
      <form onSubmit={handleSubmit(onSubmit)}>
        <Form.Group className="mb-3" controlId="email">
          <Form.Label>Email</Form.Label>
          <Form.Control
            type="email"
            placeholder="Enter your email"
            {...register("email", {
              required: "Please enter your email",
              pattern: {
                value: /^[^@ ]+@[^@ ]+\.[^@ .]{2,}$/,
                message: "Please enter a valid email"
              }
            })}
          />
          {errors.email && <p className="errorMsg">{errors.email.message}</p>}
        </Form.Group>
        <Form.Group className="mb-3" controlId="gender">
          <Form.Label>Select Gender</Form.Label>
          <Form.Check
            type="radio"
            label="Male"
            value="male"
            {...register("gender", {
              required: "Please select your gender"
            })}
          />
          <Form.Check
            type="radio"
            label="Female"
            value="female"
            {...register("gender")}
          />
          {errors.gender && <p className="errorMsg">{errors.gender.message}</p>}
        </Form.Group>
        <Form.Group className="mb-3" controlId="skills">
          <Form.Label>Select Your Skills</Form.Label>
          <Form.Check
            type="checkbox"
            label="JavaScript"
            value="JavaScript"
            {...register("skills", {
              required: "Please select at-least one skill"
            })}
          />
          <Form.Check
            type="checkbox"
            label="React"
            value="react"
            {...register("skills")}
          />
          <Form.Check
            type="checkbox"
            label="Node.js"
            value="nodejs"
            {...register("skills")}
          />
          <Form.Check
            type="checkbox"
            label="Angular"
            value="angular"
            {...register("skills")}
          />
          {errors.skills && <p className="errorMsg">{errors.skills.message}</p>}
        </Form.Group>
        <label></label>
        <Button type="submit" variant="primary">
          Submit
        </Button>
      </form>
    </div>
  );
}

Here's a Code Sandbox demo.

In the above code, I'm using react-bootstrap to make the UI look good, so Form.Check is a react-bootstrap component.

The main point you need to remember is that we've not given the same names for the register function for a group of radio buttons and checkboxes like this:

<Form.Check
    type="radio"
    label="Male"
    value="male"
    {...register("gender", {
        required: "Please select your gender"
    })}
/>
<Form.Check
    type="radio"
    label="Female"
    value="female"
    {...register("gender")}
/>

In the above code, we've given gender as the name for both the radio buttons and skills as the name for all the checkboxes as shown below:

<Form.Check
    type="checkbox"
    label="JavaScript"
    value="JavaScript"
    {...register("skills", {
        required: "Please select at-least one skill"
    })}
/>
<Form.Check
    type="checkbox"
    label="React"
    value="react"
    {...register("skills")}
/>
<Form.Check
    type="checkbox"
    label="Node.js"
    value="nodejs"
    {...register("skills")}
/>
<Form.Check
    type="checkbox"
    label="Angular"
    value="angular"
    {...register("skills")}
/>

Also, note that the required field validation is added only for the first radio button or checkbox. Because we're using the same name, we don't need to add the same validation to each radio button or checkbox.

How to Set Initial Values for Radio Buttons And Checkboxes

Sometimes we may have pre-selected radio buttons or checkboxes which we need to display on page load, in such a case, we can again use the defaultValues option from for the useForm hook.

Take a look at the below code:

import React from "react";
import { Button, Form } from "react-bootstrap";
import { useForm } from "react-hook-form";
import "./styles.css";

const initialValues = {
  gender: "male",
  skills: {
    JavaScript: true,
    react: false,
    nodejs: true,
    angular: false
  }
};

export default function App() {
  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm({
    defaultValues: {
      gender: initialValues.gender,
      skills: Object.keys(initialValues.skills).filter(
        (item) => initialValues.skills[item] === true
      )
    }
  });

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <div className="container">
      <form onSubmit={handleSubmit(onSubmit)}>
        <Form.Group className="mb-3" controlId="email">
          <Form.Label>Email</Form.Label>
          <Form.Control
            type="email"
            placeholder="Enter your email"
            {...register("email", {
              required: "Please enter your email",
              pattern: {
                value: /^[^@ ]+@[^@ ]+\.[^@ .]{2,}$/,
                message: "Please enter a valid email"
              }
            })}
          />
          {errors.email && <p className="errorMsg">{errors.email.message}</p>}
        </Form.Group>
        <Form.Group className="mb-3" controlId="gender">
          <Form.Label>Select Gender</Form.Label>
          <Form.Check
            type="radio"
            label="Male"
            value="male"
            {...register("gender", {
              required: "Please select your gender"
            })}
          />
          <Form.Check
            type="radio"
            label="Female"
            value="female"
            {...register("gender")}
          />
          {errors.gender && <p className="errorMsg">{errors.gender.message}</p>}
        </Form.Group>
        <Form.Group className="mb-3" controlId="skills">
          <Form.Label>Select Your Skills</Form.Label>
          <Form.Check
            type="checkbox"
            label="JavaScript"
            value="JavaScript"
            {...register("skills", {
              required: "Please select at-least one skill"
            })}
          />
          <Form.Check
            type="checkbox"
            label="React"
            value="react"
            {...register("skills")}
          />
          <Form.Check
            type="checkbox"
            label="Node.js"
            value="nodejs"
            {...register("skills")}
          />
          <Form.Check
            type="checkbox"
            label="Angular"
            value="angular"
            {...register("skills")}
          />
          {errors.skills && <p className="errorMsg">{errors.skills.message}</p>}
        </Form.Group>
        <label></label>
        <Button type="submit" variant="primary">
          Submit
        </Button>
      </form>
    </div>
  );
}

Here's a Code Sandbox demo.

In the above code, we have an initialValues object which contains the values we want to set on the initial page load:

const initialValues = {
  gender: "male",
  skills: {
    JavaScript: true,
    react: false,
    nodejs: true,
    angular: false
  }
};

As we can have multiple skills, skills is an object as shown above. So we want to show the radio button selected if its value is male and we want to show only those checkboxes selected for which the value is true in the skills object.

Therefore, for the defaultValues option, we're looping over the skills object using the filter method to find out the skills for which the value is true as shown below:

const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm({
    defaultValues: {
      gender: initialValues.gender,
      skills: Object.keys(initialValues.skills).filter(
        (item) => initialValues.skills[item] === true
      )
    }
  });

As the JavaScript and nodejs values are true, the skills array after the filter method will become ["JavaScript", "nodejs"] so the defaultValues object will look like this:

useForm({
    defaultValues: {
        gender: 'male',
        skills: ["JavaScript", "nodejs"]
    }
});

Therefore, when the page is loaded, only the male gender and the JavaScript and Node.js skills will be selected/checked by default.

Note that the casing used in the skills object has to match with the value specified for the checkbox.

So even though the label for checkbox is Node.js, it's value is nodejs so we're using nodejs as the key in the initialValues object.

Below is the demo of how it looks on page load.

And that's it! You've learned how to use react-hook-form to more easily build complex forms in React.

Thanks for Reading!

If you want to learn Redux in detail from scratch and build 3 apps along with the complete food ordering app, check out my Mastering Redux course.

In the course, you will learn:

• Basic and advanced Redux
• How to manage the complex state of array and objects
• How to use multiple reducers to manage complex redux state
• How to debug a Redux application
• How to use Redux in React using the react-redux library to make your app reactive.
• How to use the redux-thunk library to handle async API calls
• Build 3 different apps using Redux

and much more.

Finally, we'll build a complete food ordering app from scratch with stripe integration for accepting payments and deploy it to production.

Want to stay up to date with regular content regarding JavaScript, React, Node.js? Follow me on LinkedIn.

But that may change, as Heroku is bringing its generous free tier to an end.

You may have received email from Heroku informing you that, starting November 28, 2022, you will not be able to host any app for free on the platform, and that you will now need to purchase paid plan.

If you want to host static websites or webapps for free, you might use Netlify as I explained in this article but for backend apps. This said, there are not many free platforms that provide the same feel and ease of deployment as Heroku.

So in this article, we'll learn how to deploy your Node.js application with Express server on Render. It's a free alternative to Heroku with a similar easy deployment process.

So let's get started.

What to Do Before Deploying Your Application

As you might know from your experience using Heroku, every application deployed runs on a specific port which Heroku assigns randomly. You can access it using the process.env.PORT variable.

The same is true with the Render platform.

So you need to make sure that, instead of providing a hardcoded port value for starting your Express server, you use the process.env.PORT variable like this:

const express = require("express");
const app = express();
const PORT = process.env.PORT || 3030;

// your code

app.listen(PORT, () => {
  console.log(`server started on port ${PORT}`);
});

How to Deploy an App to Render from a GitHub Repository

Now, once you've made the port-related change, it's time to deploy your application.

I already have this GitHub repository that I will be deploying to Render. This GitHub repository code just displays the list of top repositories and the numbers of stars for each repository in JSON format.

So let's get started.

Render provides various ways to sign up as shown below:

Once signed up and logged in to your account, you will see a dashboard like this:

To deploy a Node.js application, click on the New Web Service button under the Web Services option.

You can also click on the New + button displayed in the header just before your profile picture and select Web Service option.

Once clicked, you will see the following screen:

Click on the Connect account button displayed on the right side under the GitHub menu. Once clicked, you will see the following screen:

Click on the Configure link and you can give permission to select all your GitHub repositories or only selected repositories.

I like to give access to only selected repositories which I currently need to deploy. So I selected the Only select repositories option.

Next, click on the Select repositories button displayed below the option and select the GitHub repository which you want to deploy.

Once selected, you will see the following screen displaying the selected repository.

Click on the green Install button to give access to the selected repository to the Render website.

Once clicked, you will be redirected to your dashboard where you will see your selected repository as shown below:

Now, click on the Connect button and you will see the following screen:

Here, for the Name field, enter the a short and simple name to identify your website.

Note: keep the Name value simple because it will become your application URL once the application is deployed. So if I enter github-repos as the value for the Name, my application URL will become https://github-repos.onrender.com.

So make sure to enter a short and meaningful value for Name.

Enter the details as shown below:

For Build Command enter yarn as the value which is equivalent to the yarn install command. Yarn is a package manager similar to npm but faster than npm.

And for the Start Command enter node index.js as the value, if your entry file is index.js.

After entering all the details, scroll down and you will see the Plans section where your free plan will be automatically selected. If not selected, you need to select it because we're deploying the application for free.

If you scroll down a bit more, you will see an Advanced button.

If your application is using any environment variables, you can enter them in the Advanced settings as shown below. You can also add your .env files so you don't need to enter them manually one by one.

Note that, the Auto-Deploy field has default value of Yes – so once you push your code changes to GitHub repository, they will be automatically deployed to Render.

If you don't want to auto-deploy your changes on every code change pushed to your GitHub repository, you can select the No value from the Auto-Deploy dropdown.

Now, you can click on the the Create Web Service button to start the deployment process.

Wait for a while until the deployment is going on. Sometimes, you might need to refresh the page if you keep seeing the "in progress" going on for long time.

Once the deployment is completed, you will see your application is deployed Live as shown below:

You can click on the deployed application URL which is displayed at the top as shown in the above screenshot. In my case, the application URL is https://github-repos.onrender.com/.

When you're deploying the application for the first time, you might see a Page is not working error when you try to access your deployed site.

Wait for a little while and keep refreshing the page using Ctrl + R or Cmd + R(Mac). Sometimes the Render platform takes some time to start the application as we're using a free service with limited hardware.

Once deployed, you will see your deployed application as shown below.

Tip: To see the JSON as it's formatted above, you can install the JSON Formatter Chrome Extension.

As you might know, when using Heroku with a free account, your application goes to sleep mode after every 30 minutes if there are no requests coming in for the application. This means it takes some time to load the application when the next request comes.

Similarly, in case of Render, your application will go in sleep mode after 15 minutes if there are no requests for the application.

Thanks for reading!

You can find the complete GitHub source code for the deployed application in this repository.

You can see the live demo of the deployed application here.

If you want to learn Redux in detail from scratch and build 3 apps along with the complete food ordering app, check out my Mastering Redux course.

In the course, you will learn:

• Basic and advanced Redux
• How to manage the complex state of array and objects
• How to use multiple reducers to manage complex redux state
• How to debug a Redux application
• How to use Redux in React using the react-redux library to make your app reactive.
• How to use the redux-thunk library to handle async API calls
• Build 3 different apps using Redux

and much more.

Finally, we'll build a complete food ordering app from scratch with stripe integration for accepting payments and deploy it to production.

Want to stay up to date with regular content regarding JavaScript, React, Node.js? Follow me on LinkedIn.

So let's get started.

What Is Redux Middleware?

Redux Middleware allows you to intercept every action sent to the reducer so you can make changes to the action or cancel the action.

Middleware helps you with logging, error reporting, making asynchronous requests, and a whole lot more.

Take a look at the below code:

import React from "react";
import ReactDOM from "react-dom";
import { createStore } from "redux";

const reducer = (state = 0, action) => {
  switch (action.type) {
    case "INCREMENT":
      return state + action.payload;
    case "DECREMENT":
      return state - action.payload;
    default:
      return state;
  }
};

const store = createStore(reducer);

store.subscribe(() => {
  console.log("current state", store.getState());
});

store.dispatch({
  type: "INCREMENT",
  payload: 1
});

store.dispatch({
  type: "INCREMENT",
  payload: 5
});

store.dispatch({
  type: "DECREMENT",
  payload: 2
});

Here's a Code Sandbox Demo.

If you want to understand how the above code works in a step-by-step way, check out my Redux for Beginners article.

As I explained in that article, the createStore function accepts three arguments:

• the first argument is a function that is normally known as a reducer – required argument
• the second argument is the initial value of the state – optional argument
• the third argument is a middleware – optional argument

How to Create Middleware in React

To create a middleware, we first need to import the applyMiddleware function from Redux like this:

import { applyMiddleware } from "redux";

Let's say we're creating a loggerMiddleware. Then to define the middleware we need to use the following syntax:

const loggerMiddleware = (store) => (next) => (action) => {
  // your code
};

The above code is equivalent to the below code:

const loggerMiddleware = function (store) {
  return function (next) {
    return function (action) {
      // your code
    };
  };
};

Once the middleware function is created, we pass it to the applyMiddleware function like this:

const middleware = applyMiddleware(loggerMiddleware);

And finally, we pass the middleware to the createStore function like this:

const store = createStore(reducer, middleware);

Even though we mentioned above that middleware is the third argument to the createStore function, the second argument (initial state) is optional. So based on the type of arguments, the createStore function automatically identifies that the passed argument is a middleware because it has the specific syntax of nested functions.

Here's an updated Code Sandbox Demo for the above code.

In the above Code sandbox demo, the loggerMiddleware looks like this:

const loggerMiddleware = (store) => (next) => (action) => {
  console.log("action", action);
  next(action);
};

Here's a preview link for the above Code Sandbox demo.

If you check the console, you will see the following output:

Before the action is dispatched to the store, the middleware gets executed as we can see the action logged to the console. Because we're calling the next function inside the loggerMiddleware by passing the action, the reducer will also be executed which results in the change in the store.

Now, what will happen If we don't call the next function inside the loggerMiddleware?

Then the action will not be sent to the reducer so the store will not be updated.

If you've worked with Node.js then you might find it similar to how middleware works in Node.js.

In Node.js middleware also, if we don't call the next function, the request will not be sent forward.

Here's an updated Code Sandbox Demo with the removed next function call.

const loggerMiddleware = (store) => (next) => (action) => {
  console.log("action", action);
};

Here's a preview link for the above Code Sandbox demo.

If you check the console, you will see the following output:

As you can see, we only get the actions logged to the console. And as the action is not forwarded to the reducer, it will not be executed – so we don't see the console.log from the store.subscribe function.

As described earlier, we can modify the action from the middleware before it's sent to the reducer.

Here's an updated Code Sandbox Demo where we're changing the payload of the action before it's sent to the reducer.

The code for the middleware looks like this:

const loggerMiddleware = (store) => (next) => (action) => {
  console.log("action", action);
  action.payload = 3;
  next(action);
};

Here's a preview link for the above Code Sandbox demo.

As per the code, once the action is logged to the console, we're setting the action payload to a value of 3. So the action type remains the same but the payload is changed.

So we see the state changed to 3 initially. Then again it's incremented by 3 which makes it 6. Finally it's decremented by 3 making the final state value 3.

Before the action is sent to the reducer, our loggerMiddleware gets called where we're changing the payload value and we're always setting it to 3 before it's sent to the reducer. So based on the action type INCREMENT or DECREMENT, the reducer will always be changed by a value of 3.

Even though we're changing the action in the above code, there is no issue in this case because it's a middleware and not a reducer.

Reducers should be a pure function and we shouldn't make any changes to state and action inside the reducer. You can learn more about it in detail in my Mastering Redux Course.

In the above code examples, we've created a single middleware. But you can create multiple middlewares and pass them to the applyMiddleware function like this:

const middleware = applyMiddleware(loggerMiddleware, secondMiddleware, thirdMiddleware);

All the middlewares mentioned in the applyMiddleware function will be executed one after the another.

Thanks for reading!

The content of this article is a small preview from my Mastering Redux course.

If you want to learn Redux in detail from scratch and build 3 apps along with the complete food ordering app, check out the Mastering Redux course.

In the course, you will learn:

• Basic and advanced Redux
• How to manage the complex state of array and objects
• How to use multiple reducers to manage complex redux state
• How to debug a Redux application
• How to use Redux in React using the react-redux library to make your app reactive.
• How to use the redux-thunk library to handle async API calls
• Build 3 different apps using Redux

and much more.

Finally, we'll build a complete food ordering app from scratch with stripe integration for accepting payments and deploy it to production.

Want to stay up to date with regular content regarding JavaScript, React, Node.js? Follow me on LinkedIn.

This application will allow a user to search for a country in a list of countries. It will display matching suggestions below the input field for the country the user has entered.

By building this application, you will learn:

• How to create a reusable component
• How to use the useRef hook to manage auto-suggestions
• How to create a custom reusable hook
• How to perform the search efficiently

and much more.

You can find the live demo of the final application here.

Below is the working demo of the auto-suggestion functionality.

So let's get started building the app.

Set Up the Project

We will be using create-react-app to initialize the project.

We'll be using React Hooks syntax for creating the components. So if you're not familiar with it, check out my article on hooks here.

Create a new React project by executing the following command:

npx create-react-app react-autosuggestion-app

Once you've created the project, delete all files from the src folder and create index.js, App.js, styles.css files inside the src folder.

Also create components and custom-hooks folders inside the src folder.

Install the required dependencies by running the following command from the terminal or command prompt:

yarn add axios@0.21.1 lodash@4.17.21 react-bootstrap@1.6.1 bootstrap@5.1.0

Once those are installed, open the src/styles.css file and add the contents from this file inside it.

How to Build the Initial Pages

Create a new countries.json file inside the public folder and add the contents from this file inside it.

Create an AutoComplete.js file inside the components folder with the following code:

import React from 'react';

function AutoComplete({ isVisible, suggestions, handleSuggestionClick }) {
  return (
    <div className={`${isVisible ? 'show suggestion-box' : 'suggestion-box'}`}>
      <ul>
        {suggestions.map((country, index) => (
          <li key={index} onClick={() => handleSuggestionClick(country)}>
            {country}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default AutoComplete;

In this file, we're showing the suggestions to the user once the user types something in the input textbox.

Create an useOutsideClick.js file inside the custom-hooks folder with the following code:

import { useState, useRef, useEffect } from 'react';

const useOutsideClick = () => {
  const [isVisible, setIsVisible] = useState(false);
  const ref = useRef();

  const handleOutsideClick = () => {
    if (ref.current) {
      setIsVisible(false);
    }
  };

  useEffect(() => {
    document.addEventListener('click', handleOutsideClick);
    return () => {
      document.removeEventListener('click', handleOutsideClick);
    };
  }, []);

  return [ref, isVisible, setIsVisible];
};

export default useOutsideClick;

Here, we have created a custom hook that will show/hide the suggestion box.

Initially, we have declared a state to hide the suggestion box by setting the value to false:

const [isVisible, setIsVisible] = useState(false);

Then we have declared a ref:

const ref = useRef();

We're returning this ref from our custom hook along with the isVisible and setIsVisible like this:

return [ref, isVisible, setIsVisible];

So inside the component wherever we're using the useOutsideClick hook, we can use this ref to assign it to the suggestion box. So if there are multiple input fields, then each input field will have its own suggestion box and hiding and showing functionality.

Inside the handleOutsideClick function, we have the following code:

const handleOutsideClick = () => {
  if (ref.current) {
    setIsVisible(false);
  }
};

Here, we're checking for ref.current because we want to call the setIsVisible function only if the ref for the suggestion box is available and not every time we click on the page.

Then we have added event handlers to call the handleOutsideClick function:

useEffect(() => {
  document.addEventListener('click', handleOutsideClick);
  return () => {
    document.removeEventListener('click', handleOutsideClick);
  };
}, []);

We're also removing the event handler by returning a function from the useEffect hook once the component is unmounted.

How to Create a Reusable React Component

Now, create an InputControl.js file inside the components folder with the following code:

/* eslint-disable react-hooks/exhaustive-deps */
import React, { useState, useEffect, useRef } from 'react';
import axios from 'axios';
import _ from 'lodash';
import { Form } from 'react-bootstrap';
import AutoComplete from './AutoComplete';
import useOutsideClick from '../custom-hooks/useOutsideClick';

const InputControl = ({ name, label, placeholder }) => {
  const [documentRef, isVisible, setIsVisible] = useOutsideClick();
  const [suggestions, setSuggestions] = useState([]);
  const [selectedCountry, setSelectedCountry] = useState('');
  const [searchTerm, setSearchTerm] = useState('');
  const [errorMsg, setErrorMsg] = useState('');
  const ref = useRef();

  useEffect(() => {
    ref.current = _.debounce(processRequest, 300);
  }, []);

  function processRequest(searchValue) {
    axios
      .get('/countries.json')
      .then((response) => {
        const countries = response.data;
        const result = countries.filter((country) =>
          country.toLowerCase().includes(searchValue.toLowerCase())
        );
        setSuggestions(result);
        if (result.length > 0) {
          setIsVisible(true);
        } else {
          setIsVisible(false);
        }
        setErrorMsg('');
      })
      .catch(() => setErrorMsg('Something went wrong. Try again later'));
  }

  function handleSearch(event) {
    event.preventDefault();
    const { value } = event.target;
    setSearchTerm(value);
    ref.current(value);
  }

  function handleSuggestionClick(countryValue) {
    setSelectedCountry(countryValue);
    setIsVisible(false);
  }

  return (
    <Form.Group controlId="searchTerm">
      <Form.Label>{label}</Form.Label>
      <Form.Control
        className="input-control"
        type="text"
        value={searchTerm}
        name={name}
        onChange={handleSearch}
        autoComplete="off"
        placeholder={placeholder}
      />
      <div ref={documentRef}>
        {isVisible && (
          <AutoComplete
            isVisible={isVisible}
            suggestions={suggestions}
            handleSuggestionClick={handleSuggestionClick}
          />
        )}
      </div>
      {selectedCountry && (
        <div className="selected-country">
          Your selected country: {selectedCountry}
        </div>
      )}
      {errorMsg && <p className="errorMsg">{errorMsg}</p>}
    </Form.Group>
  );
};

export default InputControl;

In this file, we've created a reusable component with search and suggestions available in the component.

Initially, we're referencing the useOutsideClick hook:

const [documentRef, isVisible, setIsVisible] = useOutsideClick();

We're storing the ref returned from the hook in the documentRef variable.
Whenever a user types something in the textbox, we're making an API call to get a list of countries with matching search criteria.

But to avoid the unnecessary API calls on every character entered in the textbox, we'll use the debounce method of the lodash library. It lets us call the API only after 300 milliseconds has passed once the user has stopped typing using the following code:

ref.current = _.debounce(processRequest, 300);

The _.debounce function call returns a function that we have stored in the ref.current variable. We will call the function stored there once 300 milliseconds have passed.

We are using ref instead of a normal variable because we need this initialization to happen only once when the component is mounted. The value of the normal variable will get lost on every re-render of the component when some state or prop changes.

We are calling the function stored in ref.current from the handleSearch function by passing the user-entered value.

So once we call the function stored in ref.current, the processRequest function will be called behind the scenes.

The processRequest function will automatically receive the value passed to the ref.current function.

Inside the processRequest function, we make an API call to get the list of countries.

function processRequest(searchValue) {
  axios
    .get('/countries.json')
    .then((response) => {
      const countries = response.data;
      const result = countries.filter((country) =>
        country.toLowerCase().includes(searchValue.toLowerCase())
      );
      setSuggestions(result);
      if (result.length > 0) {
        setIsVisible(true);
      } else {
        setIsVisible(false);
      }
      setErrorMsg('');
    })
    .catch(() => setErrorMsg('Something went wrong. Try again later'));
}

Here, once we have the response from the API, we're using the array filter method to filter out only the countries that match the provides search term.

Then we're setting out the list of countries in the suggestions state using setSuggestions(result).

Next, we're checking the length of the result array to display or hide the suggestion box.

If you check the JSX that's returned from the component, it looks like this:

return (
  <Form.Group controlId="searchTerm">
    <Form.Label>{label}</Form.Label>
    <Form.Control
      className="input-control"
      type="text"
      value={searchTerm}
      name={name}
      onChange={handleSearch}
      autoComplete="off"
      placeholder={placeholder}
    />
    <div ref={documentRef}>
      {isVisible && (
        <AutoComplete
          isVisible={isVisible}
          suggestions={suggestions}
          handleSuggestionClick={handleSuggestionClick}
        />
      )}
    </div>
    {selectedCountry && (
      <div className="selected-country">
        Your selected country: {selectedCountry}
      </div>
    )}
    {errorMsg && <p className="errorMsg">{errorMsg}</p>}
  </Form.Group>
);

Here, for the input textbox we've added a handleSearch onChange handler which looks like this:

function handleSearch(event) {
  event.preventDefault();
  const { value } = event.target;
  setSearchTerm(value);
  ref.current(value);
}

We update the searchTerm state with the value typed by the user. Then we're calling the function stored in the ref.current by passing it the value the user enters.

Calling ref.current internally calls the processRequest function where we're actually calling the API.

Then after the Input textbox, we've added a div with the ref to show the suggestions:

<div ref={documentRef}>
  {isVisible && (
    <AutoComplete
      isVisible={isVisible}
      suggestions={suggestions}
      handleSuggestionClick={handleSuggestionClick}
    />
  )}
</div>

We're showing suggestions only if isVisible is true which happens when we get results from the API inside the processRequest function.

Here, we're passing the suggestions to display in the AutoComplete component.
Once we click on any of the suggestion, the handleSuggestionClick function gets executed which is updating the selectedCountry and hiding the suggestions:

function handleSuggestionClick(countryValue) {
  setSelectedCountry(countryValue);
  setIsVisible(false);
}

How to Use the Reusable Component

Now, open the App.js file and add the following code inside it:

import React from 'react';
import { Form } from 'react-bootstrap';
import InputControl from './components/InputControl';

const App = () => {
  return (
    <div className="main">
      <h1>React AutoSuggestion Demo</h1>
      <div className="search-form">
        <Form>
          <InputControl
            name="country"
            label="Enter Country"
            placeholder="Type a country name"
          />
        </Form>
      </div>
    </div>
  );
};

export default App;

Now, start the application by running the following command from the terminal or command prompt:

yarn start

As you can see, once you select any value from the suggestion, the selected value gets displayed below the textbox.

Note: we have created a separate InputControl component that displays the input field along with its suggestion box.

So we can reuse the same InputControl component again to display suggestions in another input textbox as shown below:

import React from 'react';
import { Form } from 'react-bootstrap';
import InputControl from './components/InputControl';

const App = () => {
  return (
    <div className="main">
      <h1>React AutoSuggestion Demo</h1>
      <div className="search-form">
        <Form>
          <InputControl
            name="country"
            label="Enter Country"
            placeholder="Type a country name"
          />
          <InputControl
            name="country"
            label="Enter Country"
            placeholder="Type a country name"
          />
        </Form>
      </div>
    </div>
  );
};

export default App;

As you can see, we've added another InputControl component for the country so we're able to handle the suggestion for each input textbox separately.

So if you want to display different suggestions for another text box, you can just pass an extra prop to the InputControl component and based on that prop show different results in suggestion box.

Conclusion

As we have seen in this tutorial, by creating a reusable InputControl component and using ref to manage each input textbox's suggestion separately, we're able to create a truly reusable component for showing autocomplete suggestions.

You can find the complete source code for this tutorial in this repository and live demo here.

Thanks for reading!

If you want to learn Redux in detail from scratch and build 3 apps along with the complete food ordering app, check out the Mastering Redux course.

In the course, you will learn:

• Basic and advanced Redux
• How to manage the complex state of array and objects
• How to use multiple reducers to manage complex redux state
• How to debug a Redux application
• How to use Redux in React using the react-redux library to make your app reactive.
• How to use the redux-thunk library to handle async API calls
• Build 3 different apps using Redux

and much more.

Finally, we'll build a complete food ordering app from scratch with stripe integration for accepting payments and deploy it to production.

Want to stay up to date with regular content regarding JavaScript, React, Node.js? Follow me on LinkedIn.

But every React developer should know the basics of how to work with Redux, since industry projects often use Redux to manage larger projects.

So in this article, we'll explore the basics of Redux and how to use it.

Here's a preview of the app which we'll be building in this article. It's a great project you can add to your portfolio and resume.