How to Display Laravel Validation Errors in React

In this lesson, we will see how to display Laravel validation errors in React. Let's assume that we have a form that stores a task in the database using React & Axios, and we want to display form validation errors, so let's see how we can do that.

Display laravel validation errors

So, as we said before, in the example below we have a form that sends data to the database using Axios. Once we get an error, we store it in an array, and we loop through using the 'map' method to display all the errors in the array.

import axios from "axios";
import React, { useState } from "react"

export default function Create() {
    const [title, setTitle] = useState("");
    const [body, setBody] = useState("");
    const [errors, setErrors] = useState([]); 

    const formSubmit = async (e) => {
      e.preventDefault();
      const task = {
        title: title,
        body: body,
      };
      try {
        await axios.post('/api/tasks', task);
        setTitle("");
        setBody("");
      } catch (error) {
        setErrors(error.response.data.errors);
      }
    }

    const renderErrors = (field) => (
      errors?.[field]?.map((error, index) => (
        <div key={index} className="text-white my-2 rounded p-2 bg-danger">
          {error}
        </div>
      ))
    )

    return (
      <div className="row my-5">
        <div className="col-md-6 mx-auto">
          <div className="card">
            <div className="card-header bg-white">
              <h5 className="text-center mt-2">
                Create new task
              </h5>
            </div>
            <div className="card-body">
              <form className="mt-5" onSubmit={(e) => formSubmit(e)}>
                <div className="mb-3">
                    <label htmlFor="title" className="form-label">Title*</label>
                    <input 
                      type="text" 
                      name="title"
                      value={title}
                      onChange={(e) => setTitle(e.target.value)}
                      className="form-control" 
                      placeholder="Title*" />
                      {renderErrors('title')}
                </div>
                <div className="mb-3">
                    <label htmlFor="body" className="form-label">Body*</label>
                    <textarea 
                      className="form-control" 
                      name="body" 
                      value={body}
                      onChange={(e) => setBody(e.target.value)}
                      placeholder="Body*"
                      rows="3"></textarea>
                      {renderErrors('body')}
                </div>
                <div className="mb-3">
                  <button
                      type="submit" 
                      className="btn btn-primary">
                      Create
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    )
}