How to fetch data from an API in ReactJS ?

 This article will show how to get/fetch data from api using axios in useEffect and save it to usestate and show that data on the webpage in table format.

Here I will explain every line of code in details so take a minute and read it fully for better understanding and if you stuck in any problem then feel free to contact me in any social media.

Tools and Component i'm going to use for this are :-

• Axios to fetch data from api

• UseEffect to tell react that the component is needs to do after render

• UseState to set state variable and state function and it allows us to add state to functional components.

Import axios and make a GET request

Use npm i axios to install axios and then add it as an import import axios from 'axios'  to your parent component. I’m going to use axios to get all of my data from , which I stored in a database.

import './App.css';

import { useState, useEffect } from 'react';

import axios from 'axios';

In default function in app.js

export default function App() {

  const [databs, setdatabs] = useState([]);

  useEffect(() => {

    axios.get("https://jsonplaceholder.typicode.com/posts")

      .then((res) => {

        setdatabs(res.data)

      })

      .catch((err) => {

        console.log(err)

      })

  }, [])

  return (

    <div className='App'>

      <table>

        <tr className='row'>

          <th>UserId</th>

          <th>Id</th>

          <th>Title</th>

          <th>Body</th>

        </tr>

        {

          databs.map((item, key) => {

            return (

              <tr key={key}>

                <td>{item.userId}</td>

                <td>{item.id}</td>

                <td>{item.title}</td>

                <td>{item.body}</td>

              </tr>

            )

          })

        }

      </table>

    </div>

  );

}

At above code i will explain every line of code in details here

const [databs, setdatabs] = useState([]);

useState used to state alteration

const means constant which is datatype
databs is variable here which used to store our api data
setdatabs is state function which help to get data from the api and set it to databs

useEffect(() => {

    axios.get("https://jsonplaceholder.typicode.com/posts")

      .then((res) => {

        setdatabs(res.data)

      })

      .catch((err) => {

        console.log(err)

      })

  }, [])

useEffect runs only once i.e. the code inside useEffect will only get executed once even if we change the value of the variable count multiple times.

and here useEffect(()=>{…} is known as fat arrow.

axios.get("https://jsonplaceholder.typicode.com/posts")

axios used to fetch data using the get(http request method) method from API

"https://jsonplaceholder.typicode.com/posts"

URL of the api

.then((res)

now we have to check that if Api working successfully or not so first

.then(res) used here will check if its successful and res is just a user defined variable

setdatabs(res.data)

setdatabs is state function and we want to tell the function that data is fetching and

what to do with that data so we give that data i.e. res.data to state function which will transfer this data to data state variable.

.catch(err)

If api not hit and data not fetching then what to do So this line will do that work

where catch is predefined keyword in reactjs for api and err is just an user defined variable and you can give whatever name you want to give.

console.log(err)

if api not hit then what to show to user so here this line work and for demo i just show it in console bar

you can show it to webpage like 404 not found and other error types.

Now Api hit and data come but we know that data came but how user will know and obviously
want to see that data so let's create a simple html table to show data in proper manner.

Creating Table

<div className='App'>

      <table>

        <tr className='row'>

          <th>UserId</th>

          <th>Id</th>

          <th>Title</th>

          <th>Body</th>

        </tr>

databs.map((item, key)

This is important because this line of code will going into that data from api

which is present in (databs) and map is used as looping to get data from there

Item is where data will store and key is used to indicate the above table we created

<tr key={key}>

here we told in which table we want to show that data

<td>{item.userId}</td>

filling the First column of table named userId with the userId data getting from the Api

<td>{item.id}</td>

filling the First column of table named id with the id data getting from the Api

<td>{item.title}</td>

filling the First column of table named title with the title data getting from the Api

<td>{item.body}</td>

filling the First column of table named body with the body data getting from the Api

and now here is the data

Thank You

If you have any doubt and facing any problems regarding this topic then give a comment below of your problem

Or

You can contact me in any social media..