setState not working after submit but data is updated in database - reactjs

Question

I am new to react and Im working on reactjs with laravel api.
I designed a form using reactjs and plan on submitting the data of the form to phpmyadmin database using laravel as the api.
The problem is if I submit the data, I use setState to empty the form data, but it doesnt; but the data gets entered into the phpmyadmin database. I even try to log the response from the api to the console, but there is no message on the console of the browser.
Here is my code on the react end:
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';
class Addstudent extends Component {
state = {
name: '',
course: '',
email: '',
phone: '',
};
handleInput = (e) => {
this.setState({
[e.target.name]: e.target.value,
});
};
saveStudent = async (e) => {
e.preventDefault();
const res = await axios.post(
'http://localhost:8000/api/add-student',
this.state
);
if (res.data.status === 200) {
console.log(res.data.message);
this.setState({
name: '',
course: '',
email: '',
phone: '',
});
}
};
render() {
return (
<div className="container">
<div className="row">
<div className="col-md-12">
<div className="card">
<div className="card">
<div className="card-header">
<h4>Add Students</h4>
<Link to={'/'} className="btn btn-primary btn-sm float-end">
Back
</Link>
</div>
<div className="card-body">
<form onSubmit={this.saveStudent}>
<div className="form-group mb-3">
<label>Student Name</label>
<input
type="text"
name="name"
onChange={this.handleInput}
className="form-control"
placeholder="Enter Name"
value={this.state.name}
></input>
</div>
<div className="form-group mb-3">
<label>Student Course</label>
<input
type="text"
name="course"
onChange={this.handleInput}
className="form-control"
placeholder="Enter Course"
value={this.state.course}
></input>
</div>
<div className="form-group mb-3">
<label>Student Email</label>
<input
type="text"
name="email"
onChange={this.handleInput}
className="form-control"
placeholder="Enter Email"
value={this.state.email}
></input>
</div>
<div className="form-group mb-3">
<label>Student Phone</label>
<input
type="text"
name="phone"
onChange={this.handleInput}
className="form-control"
placeholder="Enter Phone"
value={this.state.phone}
></input>
</div>
<div className="form-group mb-3">
<button type="submit" className="btn btn-primary">
Save Student
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default Addstudent;
On the Laravel end Here is the code on the controller handling the post request:
<?php
namespace App\Http\Controllers\API;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Models\Student;
class StudentController extends Controller
{
public function store(Request $request){
$student = new Student;
$student->name =$request->input('name');
$student->course =$request->input('course');
$student->email =$request->input('email');
$student->phone =$request->input('phone');
$student->save();
return response()->json([
'status'=> '200',
'message'=>'Student Added Successfully',
]);
}
}

Answer 1

Your handleInput function is overwriting your state with only one property, you have to keep the old data:
this.setState(s => ({
...s,
[e.target.name]: e.target.value,
}));
Otherwise you will never send all values to the API, assuming it is working correctly there
if (res.data.status === 200) {
console.log(res.data.message);
This logging is great if everything works well, but you may want to log if things go wrong too, so you could notice that you're not sending all values to the database:
try {
const res = await axios.post(
'http://localhost:8000/api/add-student',
this.state
);
// ... code using res
} catch(e) {
console.error(e);
}