Site icon RemoteStack

React Show HTTP Errors with React Hook Form Tutorial

In this React Hook Form step by step guide, we will reveal how to manage and show custom error messages through React hook form that we receive after failed HTTP request.

How to Show Failed HTTP Requests Error Messages in React with React Hook Form

Build New React App

We will start our first step by building a new react project, If you already know the process then jump on to the next step.

Head over to the command line tool of your code editor and execute the command to start the app installation process.

npx create-react-app react-blog

Next, move into your app folder.

cd react-blog

Install Yup Library

We believe you have entered inside your app; from there, you have to invoke the command and let the Yup package settle inside your app.

npm install @hookform/resolvers

Install React Hook Form Package

React Hook Form package will be added to react app; this library offers boundless, performant, flexible, and extensible options to handle forms with profound validation.

npm install yup

Build Form Component

At this point, the required packages have been added to app. Subsequently, create the new AuthForm.js file inside the component/ directory.

You have to import useForm (React Hook Form), yupResolver, and yup; these modules will help you handle the error messages returned from API response after failed HTTP request.

Ultimately, add code in AuthForm.js file.

Import Form Component

It is necessary to add the form component, ensure that you open the App.js.

On top of that, import the Form component within the file main app component as suggested below.

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import AuthForm from './components/AuthForm'

export default function App() {
  return (
    <div className="container mt-3">
      <AuthForm />
    </div>
  )
}

Run App in Browser

If you want to see the form in action, then you have to start the application.

Consequently, it requires a given command to be typed on the command line.

Don’t forget to execute the command to view the app in the browser.

npm start

Summary

In this tutorial, we diligently learned and explored the process of confirm password validation in React.

We explained the entire process bit by bit to build the password match validation component using the react hook form and yup packages.

Exit mobile version