Open In App

Where in a React component should you make an AJAX request ?

Improve
Improve
Like Article
Like
Save
Share
Report

In most modern web applications, the back end is separated from the frontend. Therefore, it must fetch data from a remote endpoint(server), by making AJAX requests.

Prerequisites:

Approach:

  • Import React, useState, and useEffect:
    • Import React along with the `useState` and `useEffect` hooks for managing state and handling side effects.
  • Fetch Data with useEffect:
    • Use the `useEffect` hook to fetch data from “https://catfact.ninja/fact” when the component mounts.
    • Update the state variable `text` with the fetched fact or an error message in case of failure.
  • Render JSX:
    • Return JSX to display the fetched data or an error message within a styled div with the class “App.”

Steps to Create the React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app myapp

Step 2: After creating your project folder, i.e. myapp, move to it using the following command:

cd myapp

Project Structure:

Initial folder structure

Example: Now that we have the project set up, let us replace the content of App.js.

App.js




import React, { useState, useEffect } from "react";
import './App.css'
const App = () => {
    const [text, setText] = useState("Data has not been fetched yet!");
 
    useEffect(() => {
        fetch("https://catfact.ninja/fact")
            .then((response) => response.json())
            .then(({ fact }) => setText(fact))
            .catch((error) => {
                setText("An error occurred!");
            });
    }, []);
 
    return <div className="App"><p>{text}</p></div>;
};
 
export default App;


CSS




/* Write CSS Here */
 
.App {
    /* min-width: 50vw; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
 
body {
    background-color: antiquewhite;
}
 
p {
    font-size: 25px;
    color: rgb(0, 167, 228);
    font-weight: bold;
}
 
button {
    width: 10em;
    height: 2em;
    background-color: rgb(27, 24, 24);
    font-weight: 600;
    font-family: 'Lucida Sans', 'Lucida Sans Regular',
      'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: white;
    border-radius: 6px;
    border: none;
}
 
button:hover {
    background-color: rgb(96, 145, 125);
}


Step to run the application: Use the following command to run the app in development mode, and open http://localhost:3000 to view it in the browser:

npm start

Output:

AJAXGIF

Output



Last Updated : 28 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads