If you’ve never done anything in React, beware: it’s not for the faint of heart. But using this simple code snippet and some CSS, we can put together a table that will let us display information pulled from an API.
The “react fetch data from api with params” is a simple way to fetch data from an API and display it in a table. The example uses React, but this can be done with other libraries as well.
In this article, we’ll look at how to get data from an API and show it in a table using React Js and a bootstrap HTML table.
There are two sorts of components in React: functional and class components. Functional components are JavaScript functions that return HTML that explains the user interface. For example, consider the function “functionalcomp,” which produces a tag that reads “Hello, this is a functional Component.”
Hello, this is a functional Component. function functionalcomp() return
On the other hand, class, components are standard ES6 classes that extend the component class from the React framework. They must have a render function that returns HTML, such as the class Myclasscomp, which extends React. The render function in Component and the class produces a tag that reads “Hello, this is my class Component.”
Myclasscomp is a React extension. return Component render() Hello, here is my class Component.
In this example, we’ll talk about both functional and class components for displaying data. So, let’s get started.
The following things will be discussed in this article.
- Using ReactJS, get user data from an API and add it to a table.
- Using React Js to display data from the retrieve API
- In react.js, how to get API data and display it in a table form
- How to use the retrieve API in react js to show data from an API.
Table of Contents
How to use the Fetch API in React js to get data from an API.
Step 1: Make a React App
Step 2: Make components to display List data.
Create two components folders in the src folder, one for EmployeelistFun.js and the other for Employeelist.js.
Step 3: Use the fetch() method to integrate the Rest API.
Example of React js fetching data from an API
The Fetch API is the most recent client-side interface for making HTTP queries to Rest APIs.
If you’re familiar with the XMLHttpRequest (XHR) object, you should know that the Fetch API may do all of the same functions.
The fetch() function is a global function that instructs the client of a web browser to submit a request to a rest URL.
Requesting and Receiving Information The URL of the resource, i.e. the API endpoint that you wish to retrieve, is the sole argument sent to the fetch() function.
const response = (url) => { fetch(url) .then((res) => res.json()) .then( (result) => { console.log(result); }, (error) => { console.log(error) } ); };
Fetch API employs the Promise to offer more flexible capabilities for making requests to servers from the client, making it more easier to use.
React Js uses an API functional component to get data.
EmployeelistFun.js
import React, { useState, useEffect } from “react” const EmployeelistFun = () => { const [employeeslist, setemployees] = useState(null) useEffect(() => { getemployees() }, []) const getemployees = () => { fetch(” http://restapi.adequateshop.com/api/Metadata/GetEmployees”) .then(res => res.json()) .then( (result) => { setemployees(result) }, (error) => { setemployees(null); } ) } if (!employeeslistreturning (
No results were found.
returning (
Funcational Component Employees List
{employeeslist.map(emp => ())}
| Employee Identification Numberentification Number | Name | Address | City | ZipCode |
|---|---|---|---|---|
| {emp.Id} | {emp.Name} | {emp.Address} | {emp.City} | {emp.ZipCode} |
) EmployeelistFun default export;
Data is retrieved from the API Class component using React.
Employeelist.js
import React from ‘react’; class Employeelist extends React.Component { constructor(props) { super(props); this.state = { employees: [], IsApiError: false } } componentDidMount() { fetch(” http://restapi.adequateshop.com/api/Metadata/GetEmployees”) .then(res => res.json()) .then( (result) => { this.setState({ employees: result }); }, (error) => { this.setState({ IsApiError: true }); } ) } render() { var employeeslist = this.state.employees; debugger; if (employeeslist && employeeslist.length > 0) { return (
Component of the Employees List
{employeeslist.map(emp => ())}
| Employee Identification Numberentification Number | Name | Address | City | ZipCode |
|---|---|---|---|---|
| {emp.Id} | {emp.Name} | {emp.Address} | {emp.City} | {emp.ZipCode} |
) if not, return (
No results were found.
) Export the default Employeelist
Step 4: In App.js, import the component. App.js
Import ‘./App.css’; Employeelist from “./components/Employeelist”; EmployeelistFun from “./components/EmployeelistFun”; function App() return (
); export the default application;
I’m assuming you’re acquainted with the React Js framework and how to build React Js apps. If not, have a look at the following articles:
React Js is a javascript library that allows you to build user interfaces for the web. In this tutorial, we’ll learn how to fetch data from an API and display it in a table. Reference: react fetch data from api axios.
Related Tags
- react fetch data from api on button click
- react fetch data from api functional component
- react fetch data from api example
- how to fetch data from api in react hooks
- how to display response data in react js
