How to Make an API Call in React: 3 Ways

Meta tags

Meta Tag	Content
robots	index, follow, max-image-preview:large
description	An API call in React refers to making a request to a web API from a React application. We can make an API call with: XMLHttpRequest, Fetch API or Axios.
abstract	APIs
keywords	APIs
twitter:card	summary_large_image
twitter:description	An API call in React refers to making a request to a web API from a React application. We can make an API call with: XMLHttpRequest, Fetch API or Axios.
twitter:title	How to Make API Calls in React With Examples \| Built In
twitter:url	https://builtin.com/software-engineering-perspectives/react-api
twitter:image:alt	Rotary phone on a table representing API calls
twitter:image:height	1200
twitter:image:width	600
twitter:image	https://builtin.com/sites/www.builtin.com/files/styles/og/public/2023-08/react-api.jpg
generator	Drupal 9 (https://www.drupal.org); Commerce 2
mobileoptimized	width
handheldfriendly	true
viewport	width=device-width, initial-scale=1.0, maximum-scale=5
theme-color	#04003F
Website Page URL	https://builtin.com/software-engineering-perspectives/react-api

Heading tags

h1 tag

We found around "1" h1 tags which are found in this page url and are available in the table below.

S.no	h1 tag content
1	How to Make API Calls in React With Examples

h2 tag

We found around "5" h2 tags which are found in this page url and are available in the table below.

S.no	h2 tag content
1	React API Call Explained
2	What Is a React API Call?
3	3 Ways to Make React API Calls
4	Which React API Call Method Should You Use?
5	Morgan Stanley

h3 tag

We found around "4" h3 tags which are found in this page url and are available in the table below.

S.no	h3 tag content
1	1. XMLHttpRequest
2	2. Fetch API
3	3. Axios
4	Great Companies Need Great People. That's Where We Come In.

h4 tag

We found around "2" h4 tags which are found in this page url and are available in the table below.

S.no	h4 tag content
1	XMLHttpRequest vs. Fetch API
2	Fetch API vs. Axios

h5 tag

Unfortunately we were not able to find any h3 tag in the URL of this page.

h6 tag

Unfortunately we were not able to find any h3 tag in the URL of this page.

HTML Formatting Elements - Important text (strong/bold) tags

S.no	Tag content
1	Simpler syntax
2	Better error handling:
3	Automatic type conversion:
4	Automatic transformation of data:
5	Handling errors:
6	Support for older browsers:
7	Abort requests:
8	Better testing:
9	Improved functionality:
10	XMLHttpRequest
11	Fetch API
12	Axios

HTML Formatting Elements - Important text (i) tags

S.no	Tag content

HTML Formatting Elements - Underline text (u) tags

S.no	Tag content

HTML Formatting Elements - Code tags


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

function Example() {
  const [data, setData] = useState(null);

  function handleClick() {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://api.example.com/data');
    xhr.onload = function() {
      if (xhr.status === 200) {
        setData(JSON.parse(xhr.responseText));
      }
    };
    xhr.send();
  }

  return (
    <div>
      <button onClick={handleClick}>Get Data</button>
      {data ? <div>{JSON.stringify(data)}</div> : <div>Loading...</div>}
    </div>
  );
}
GET
POST
PUT
DELETE
fetch
import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(json => setData(json))
      .catch(error => console.error(error));
  }, []);

  return (
    <div>
      {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : 'Loading...'}
    </div>
  );
}

export default App;
REST
npm install axios
import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        setPosts(response.data);
      })
      .catch(error => {
        console.error(error);
      });
  }, []);

  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

export default App;
json()
catch
CancelToken

S.no	Tag content
1	`XMLHttpRequest`
2	`import React, { useState } from 'react'; function Example() { const [data, setData] = useState(null); function handleClick() { const xhr = new XMLHttpRequest(); xhr.open('GET', 'https://api.example.com/data'); xhr.onload = function() { if (xhr.status === 200) { setData(JSON.parse(xhr.responseText)); } }; xhr.send(); } return ( <div> <button onClick={handleClick}>Get Data</button> {data ? <div>{JSON.stringify(data)}</div> : <div>Loading...</div>} </div> ); }`
3	`GET`
4	`POST`
5	`PUT`
6	`DELETE`
7	`fetch`
8	`import React, { useState, useEffect } from 'react'; function App() { const [data, setData] = useState(null); useEffect(() => { fetch('https://api.example.com/data') .then(response => response.json()) .then(json => setData(json)) .catch(error => console.error(error)); }, []); return ( <div> {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : 'Loading...'} </div> ); } export default App;`
9	`REST`
10	`npm install axios`
11	`import React, { useState, useEffect } from 'react'; import axios from 'axios'; function App() { const [posts, setPosts] = useState([]); useEffect(() => { axios.get('https://jsonplaceholder.typicode.com/posts') .then(response => { setPosts(response.data); }) .catch(error => { console.error(error); }); }, []); return ( <ul> {posts.map(post => ( <li key={post.id}>{post.title}</li> ))} </ul> ); } export default App;`
12	`json()`
13	`catch`
14	`CancelToken`

The Anchor element (a) tags

S.no	Anchor tag Content
1	Skip to main content
2	Expert Contributors
3	Software Engineering Perspectives
4	Jayanth Somineni
5	React
6	JavaScript library
7	API
8	How to Make a JavaScript API Call
9	sending HTTP requests
10	JSON data
11	www.youtube.com
12	Different Ways to Display Images in React.js Apps
13	APIs
14	Javascript
15	Software Engineering
16	Web Development
17	Morgan Stanley
18	View profile
19	We are hiring
20	Learn More
21	Recruit With Us
22	Our Story
23	Careers
24	Our Staff Writers
25	Content Descriptions
26	Company News
27	Recruit With Built In
28	Subscribe to Our Newsletter
29	Become an Expert Contributor
30	Send Us a News Tip
31	Customer Support
32	Share Feedback
33	Report a Bug
34	Tech A-Z
35	Browse Jobs
36	Built In Austin
37	Built In Boston
38	Built In Chicago
39	Built In Colorado
40	Built In LA
41	Built In NYC
42	Built In San Francisco
43	Built In Seattle
44	See All Tech Hubs
45	Learning Lab User Agreement
46	Accessibility Statement
47	Copyright Policy
48	Privacy Policy
49	Terms of Use
50	Do Not Sell My Personal Info
51	CA Notice of Collection

Contact Us

If you have any inquiries or feedback, please don't hesitate to reach out to us at [email protected]. We will respond to your request as soon as possible. Thank you very much for your interest!

How to Make an API Call in React: 3 Ways | Built In