fetch api in react js

The Fetch API is a modern way in JavaScript to make network requests, like fetching data from a server or sending data to a server. It's built into web browsers and allows you to communicate with servers using different HTTP methods like GET, POST, PUT, DELETE, etc.

useEffect(() => { ... }, []);: This is a React hook called useEffect. It's used for performing side effects in function components. Here, we're using it to fetch data when the component is mounted ([] as the dependency array means it runs only once, when the component mounts).

const fetchData = async () => { ... }: This is a function called fetchData. It's an asynchronous function, which means it can perform asynchronous operations like fetching data from an API.

const response = await fetch('https://api.npoint.io/87cca38eedcb5984bfa9'):

 Here, we're using the fetch function to make a GET request to the specified URL (https://api.npoint.io/87cca38eedcb5984bfa9). This URL is where our JSON data is located. The await keyword is used to wait for the response to come back from the server.

const jsonData = await response.json();: Once we receive the response from the server, we extract the JSON data from it using the json() method. This method returns a promise, so we use await to wait for the JSON data to be extracted.

setData(jsonData);: After extracting the JSON data, we use the setData function to update the state of our component with this data. This will trigger a re-render of our component with the updated data.

json data:

[

    {

      "id": 1,

      "name": "John",

      "age": 30

    },

    {

      "id": 2,

      "name": "Jane",

      "age": 25

    },

    {

      "id": 3,

      "name": "Alice",

      "age": 35

    }

  ]

 

online json data:

https://api.npoint.io/87cca38eedcb5984bfa9

App.js

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

const MyComponent = () => {

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

  const [loading, setLoading] = useState(true);

  useEffect(() => {

    const fetchData = async () => {

      try {

        const response = await fetch('https://api.npoint.io/87cca38eedcb5984bfa9');

        const jsonData = await response.json();

        setData(jsonData);

        setLoading(false);

      } catch (error) {

        console.error('Error fetching data:', error);

      }

    };

   

    fetchData();

  }, []);

  if (loading) {

    return <div>Loading...</div>;

  }

  return (

<div>

      <h1>JSON Data:</h1>

      <ul>

        {data.map(item => (

          <li key={item.id}>

            Name: {item.name}, Age: {item.age}

          </li>

        ))}

      </ul>

    </div>

  );

};

export default MyComponent;

website used to make json data onlonehttps://www.npoint.io/