JIYIK CN >

To make an http request on click in React:

1. Sets the attribute on the element onClick.
2. Each time the element is clicked, an HTTP request is made.
3. Update state variables and render data.

If we use axios, please scroll down to the next code snippet.

import {useState} from 'react';

const App = () => {
  const [data, setData] = useState();
  const [isLoading, setIsLoading] = useState(false);
  const [err, setErr] = useState('');

  const handleClick = async () => {
    setIsLoading(true);
    try {
      const response = await fetch('https://reqres.in/api/users', {
        method: 'POST',
        body: JSON.stringify({
          name: 'John Smith',
          job: 'manager',
        }),
        headers: {
          'Content-Type': 'application/json',
          Accept: 'application/json',
        },
      });

      if (!response.ok) {
        throw new Error(`Error! status: ${response.status}`);
      }

      const result = await response.json();

      console.log('result is: ', JSON.stringify(result, null, 4));

      setData(result);
    } catch (err) {
      setErr(err.message);
    } finally {
      setIsLoading(false);
    }
  };

  console.log(data);

  return (
    <div>
      {err && <h2>{err}</h2>}

      <button onClick={handleClick}>Make request</button>

      {isLoading && <h2>Loading...</h2>}

      {data && (
        <div>
          <h2>Name: {data.name}</h2>
          <h2>Job: {data.job}</h2>
        </div>
      )}
    </div>
  );
};

export default App;

If we need to make an HTTP GET request on button click in React, please check out my other article - Get data on button click in React .

This example shows how to make an HTTP Post request when a button is clicked in React.

We set onClickthe property on the button element, so every time the button is clicked, handleClickthe function will be called.

We handleClickmarked the function as async so we can use the await keyword to wait for the Promises inside it.

In handleClickthe function, we wait for the POST http request to complete and update the state variable.

This example uses the native fetch API, but the concept applies if we also use the axios package.

Here's how you would use the axios package to make an http POST request on button click.

If we decide to use axios, make sure npm install axiosthe package is installed by running.

import {useState} from 'react';
import axios from 'axios';

const App = () => {
  const [data, setData] = useState();
  const [isLoading, setIsLoading] = useState(false);
  const [err, setErr] = useState('');

  const handleClick = async () => {
    setIsLoading(true);
    try {
      const {data} = await axios.post(
        'https://reqres.in/api/users',
        {name: 'John Smith', job: 'manager'},
        {
          headers: {
            'Content-Type': 'application/json',
            Accept: 'application/json',
          },
        },
      );

      console.log(JSON.stringify(data, null, 4));

      setData(data);
    } catch (err) {
      setErr(err.message);
    } finally {
      setIsLoading(false);
    }
  };

  console.log(data);

  return (
    <div>
      {err && <h2>{err}</h2>}

      <button onClick={handleClick}>Make request</button>

      {isLoading && <h2>Loading...</h2>}

      {data && (
        <div>
          <h2>Name: {data.name}</h2>
          <h2>Job: {data.job}</h2>
        </div>
      )}
    </div>
  );
};

export default App;

This example shows how to use axiosto make an Http POST request on click.

If we use that axios, make sure to install the package by running in the root directory of the project npm install axios.

The syntax is a little cleaner when using axiosthe package, and we have to deal with fewer implementation details, but the concept is the same.

We have to set the attribute on the button element onClickand make an HTTP request every time the button is clicked.