Axios post requests are not working with events using ReactJS

Question

Been quite stuck for the past week or so and cannot find any answers to my issue. Today I started doing some proper investigating. It looks like Axios is not working when firing events. This also does not work on my main PC either which makes me think it's actually a bug with Axios.

I have already tried:

• Reinstalling Axios independently
• Uninstalling all global dependencies I have
• Creating a new React App
• Checking the events are firing (which they are)
• Checking my network tab (nothing shows up)

My post request is working fine when just calling it as a function:

import React from "react";
import axios from "axios";
import "./App.css";

function App() {
  const makeRequest = () => {
    axios.post("http://localhost:5000");
  };

  makeRequest();

  return <div className="app"></div>;
}

export default App;

Backend output: There was a post request!

However, my code does not work when using events, this goes for onClick and onSubmit (that's what I have tested anyway):

import React from "react";
import axios from "axios";
import "./App.css";

function App() {
  const makeRequest = () => {
    axios.post("http://localhost:5000");
  };

  return (
    <div className="app">
      <button onClick={makeRequest}>Post Request</button>
    </div>
  );
}

export default App;

No backend output or frontend output. Help would be much appreciated!

Edit: Something I forgot to mention was that fetch works absolutely fine, but I'd really rather use Axios where possible.

Answer 1

Change your const to a function and call it with an object passthrough method.

import React from "react";
import axios from "axios";
import "./App.css";

function App() {
  function makeRequest (){
    axios.post("http://localhost:5000");
  };

  return (
    <div className="app">
      <button onClick={() => makeRequest()}>Post Request</button>
    </div>
  );
}

export default App;

Answer 2

Try to add more console.log calls to grab more debug data from frontend - it can help to solve the problem.

import React from "react";
import axios from "axios";
import "./styles.css";

export default function App() {
  const makeRequest = () => {
    const result = axios
      .post("https://jsonplaceholder.typicode.com/users")
      .then((result) => {
        console.log("Result", result);
      })
      .catch((error) => console.error("Error", error))
      .finally(() => console.log("Request has been made"));
    console.log("Result should be a Promise object", result);
  };

  return (
    <div className="app">
      <button onClick={makeRequest}>Post Request</button>
    </div>
  );
}

The code snippet above works totally fine. Check the code snippet here , and try to run it on your environment. If the information in console logs will not appear or either didn't help – dig into your environment and tools which you use to transpile JSX code, build JS and add that information to the question. Probably the problem is hidden somewhere in there.

Answer 3

Kindly check if you have "proxy": "localhost:5000" in your react app package.json file, this will allow React to proxy API requests to the Node.js server built with Express.

5000 is the node server port.

Answer 4

The problem is that your're passing the funcion instead of calling it. I would try using an arrow funcion in onClick likt this:

onclick={()=> makeRequest()}

Answer 5

I can see you are not invoking the function with (), it should be makeRequest()