react fetch data from api on button click

React Js- Fetch data from API on button click

In this post, we will discuss How to make an API fetch request on the button click Reactjs?. I’m assuming that you are clear about React Js from and about the React Js framework and you are also familiar with creating React Js applications. if you are not clear about these then please read the below post.

we will create a web page with textbox and HTML table list.we are binding the table with the data list returned by API.we want to filter the user list by user city so when we click the search button, we pass one parameter into a fetch API request.

In this post we will cover the following points:

  1. Fetch from external API function on button click.
  2. ReactJS display fetch response onClick of Button.
  3. How do make an api fetch request on button click Reactjs?

react fetch data from api on button click

Step 1 – Create React App

Step 2 – Create components for showing List data

Step 3 – Integrate Rest API and handle button click event

 

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

const FetchDataOnButton = () => {
  const [userList, setusers] = useState(null);
  const [searchtxt, setSearch] = useState("")
  useEffect(() => {
    getuesers("http://restapi.adequateshop.com/api/Metadata/users");
  }, []);

  const getuesers = (url) => {
    fetch(url)
      .then((res) => res.json())
      .then(
        (result) => {         
          setusers(result);
        },
        (error) => {
          console.log(error)          
          setusers(null);
        }
      );
  };

  const handleValue = e => {
        setSearch(e.target.value)
    }

  const searchUser = e => {
        e.preventDefault()
    getuesers("http://restapi.adequateshop.com/api/Metadata/GetUsersByParam?city="+searchtxt);
    }
  if (!userList) return <div>No Record Found</div>;
  return (
    <div>
      <h2>Users List Funcational Component </h2>
      <div className="row">
        <div className="col-sm-6">
        <input
        type='text'
        name='city'
        className="form-control"
        value={searchtxt}
        placeholder='city'
        onChange={e => handleValue(e)}
      />
        </div>
        <div className="col-sm-6">
        <input
        className='btn btn-primary btnsubmit'
        type='submit'
        value='Search'
        onClick={searchUser}
      />
        </div>
      </div>            

      <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 FetchDataOnButton;

So on the button is clicked, we are making an HTTP request, Updating the state variables, and rendering the data.

We will discuss this in the next article, but make a note of the two-component types stateless functional components and stateful class components. Now that we have some understanding of the React components, let’s understand the App component in our Hello World react application
it is a JavaScript file. The class is named App and extends the component class from the React library, it contains a render method that returns some HTML.

You can have thousands of components. Facebook, I believe, has over 30000 components, is more complex, and the application has more a number of components. All right, then let me quickly summarize what we have learned about components

Ashok Patel

I'm a software engineer, having good experience in software programming web designing with great command on ASP.NET, React JS, Angular JS,.NET Core HTML5, JavaScript, T-SQL, JQuery.
Also have great experience in Electronics and electrical engineers design.
I like to do RND and Research.

Your Header Sidebar area is currently empty. Hurry up and add some widgets.