Fetch API in React Tutorial

 What is an API?

API is the acronym for Application Programming Interface, which is a software intermediary that allows two applications to talk to each other. Each time you use an app like Facebook, send an instant message or check the weather on your phone, you're using an API.

We will fetch a JSON file hosted on the cloud and we will fetch the URL of the image and will show the image in the front end.

We will use Hooks in React like useState,useEffect, etc.

Complete code below to use it as an example.

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

import "./styles.css";

export default function App() {

const [data, setData] = useState([]);

const fetchData = () => {

fetch("https://jatinhemnani1.pythonanywhere.com/pubg")

.then((res) => res.json())

.then((res) => setData(res));

};

useEffect(() => {

fetchData();

});

return (

<div className="App">

{data.map((item, index) => {

return (

<div key={index}>

<img src={item.url} height="400" alt="images" />

</div>

);

})}

</div>

);

}