How to Display Laravel Validation Errors in React js
1 year ago
admin
Reactjs
In this lesson, we will see how to display Laravel validation errors in React js, let's assume that we have a form that stores a task in the database using React js & Axios and we want to display 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>
)
}