React Js- Fetch data from API with params

In this post, we will learn how to use the Fetch GET command with parameters in react js. we will also learn how we can pass query string GET API.

In this post,We will discuses the below point-

• GET with query string with Fetch in React
• How to Get info from API request with parameters in ReactJS

Below we have a sample test that takes the city as a parameter and then returns the user belongs to that city. We are going to use that API for our demonstration.

API ENDPOINT: http://samplerestapi.com/api/Metadata/GetUsersByParam?city=Paris

Response:

[
{
"Id": 2,
"Name": "Liu Wong",
"Address": "DaVinci",
"City": "Paris",
"ZipCode": "243232"
}
]

Component Code
FetchDataParam.js

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

const FetchDataParam = () => {
const [userList, setusers] = useState(null);
  useEffect(() => {
    getuesers();
  }, []);
const getuesers = () => {
    fetch("http://samplerestapi.com/api/Metadata/GetUsersByParam?city=Paris")
      .then((res) => res.json())
      .then(
        (result) => {          
          setusers(result);
        },
        (error) => {
          console.log(error)          
          setusers(null);
        }
      );
  };

if (!userList) return <div>No Record Found</div>;
return (
    <div>
      <h2>Users List Funcational Component </h2>
      <table className="table">
        <thead>
          <tr>
            <th>User Id</th>
            <th>Name</th>
            <th>Address</th>
            <th>City</th>
            <th>ZipCode</th>
          </tr>
        </thead>
        <tbody>
          {userList.map((user) => (
            <tr>
              <td>{user.Id}</td>
              <td>{user.Name}</td>
              <td>{user.Address}</td>
              <td>{user.City}</td>
              <td>{user.ZipCode}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};
export default FetchDataParam;

React is flexible, declarative, and efficient for web and mobile applications.In simple, we can say react Js effectively handle the view layer of mobile and web application.

it can be used in any existing web application to develop a new feature. These are the applications that you can be using. The area is only concerned with getting data to the document object model.React has become highly popular across the globe because of its extra simplicity and flexibility. Many people are even referring to the React Js as the future of Web development.

Part of this huge popularity comes from the fact that top corporations such as Facebook, PayPal, Facebook, Uber, Instagram, and Airbnb use it to develop web user interfaces to make things a little exciting.It was deployed on Facebook’s news feed in 2011 and later on Instagram in 2014. React Native, which enables Native Android and Ios development.