Skip to content

How to make HTTP Request in React.js

Last updated on July 7, 2023

To make an HTTP request in React.js, you can use the built-in fetch function or third-party libraries like Axios or the axios adapter for fetch. Here’s an example of using the fetch function to make an HTTP GET request in React:

import React, { useEffect, useState } from 'react';

const MyComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('');
        const jsonData = await response.json();
      } catch (error) {
        console.error('Error:', error);

  }, []);

  return (
      {data ? (
          { => (
            <li key={}>{}</li>
      ) : (
        <p>Loading data...</p>

export default MyComponent;

In the example above:

  • We define a functional component called MyComponent.
  • Inside the component, we use the useState hook to define a state variable data and a setter function setData to store the fetched data.
  • We use the useEffect hook to fetch data when the component mounts (using an empty dependency array []).
  • In the fetchData function, we use fetch to make an HTTP GET request to ''.
  • We parse the response data using response.json().
  • The parsed JSON data is then set to the data state variable using setData.
  • We conditionally render the data in the component. If the data is available, we render a list of items. Otherwise, we display a loading message.

Note that this is a basic example, and you may need to handle error scenarios, additional HTTP methods, headers, and other options based on your specific requirements.

0 0 votes
Article Rating
Notify of

Inline Feedbacks
View all comments