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.

📰 Read more article

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

The post React Js- Fetch data from API using hooks appeared first on Software Development | Programming Tutorials.



Read More Articles