Error reported while sending data using Axios in REACTJS

[jyotirmoydas12]

Getting could not insert data alert when button submitted… Why is it executing the catch part ?

import './App.css';
import { useState} from "react";
import Axios from 'axios';                                

function App() {

  const [name, setName] = useState("");
  const [age, setAge] = useState(0);

  const addUser = () => {
    Axios.post("http://localhost:3001/adduser", {         
      name: name, 
      age: age,
    }).then(() => {                                         
        alert("data inserted successfully..");
    }).catch(() => {
        alert("could not insert data..");
    });           
  };

  return (
    <div className="App">
      <div className="inputs">
        <input 
          type="text" 
          placeholder="Your name here..." 
          onChange={(event) => {
            setName(event.target.value);
            }}
        />
        <input 
          type="number" 
          placeholder="Your age here..."
          onChange={(event)=> {
            setAge(event.target.value);
          }}
        />
        <button onClick={ addUser }>Add User</button>      
      </div>      
    </div>
  );
}

export default App;

[kevinSmith]

It is running the catch block because something is throwing the error. To you have any info in the network tab of your dev tools? Why not catch the error:

    }).catch(err => {
        alert("could not insert data..", err);
    });  

[jyotirmoydas12]

Dev Tools gives me this

[jyotirmoydas12]

Hey I just found out the reason, I was was using POST in the front-side with Axios and in the back-end express part i used a GET which was causing the error. Now it’s all working.