Question: I am new to MERN and I am learning it. I don't know how to fetch all the data from a specific collection and display the data of each record on separate cards. I have developed the backend code and is working perfectly when I send requests via postman but fetching and displaying data from React app is a problem for me. How can I do that?

**My Backend API code**

```
router.get('/ads', async (req,res,next)=>{
  try{
    const ads = await Ads.find();

    return res.status(200).json({
      success: true,
      count: ads.length,
      data: ads,
    });
  } catch(err) {
    console.log(err);
    res.status(500).json({ error: 'server error' });
  }
});

```

[![image](https://i.stack.imgur.com/ZNjeF.png)](https://i.stack.imgur.com/ZNjeF.png)

Answer: 
Just use the AXIOS library to do your REST calls in the front-end.
What you created in your nodejs project is just an endpoint, now you will have to make an API call to the endpoint from the front end.

Answer by Heartbit is also apt, but typically in React, devs use the AXIOS library for the rest API calls.

Read the docs here: <https://www.npmjs.com/package/axios>

As you are starting watch a tutorial on AXIOS if the documentation is too much for you.

After importing Axios, inside useEffect hook, you should be writing something like this:

```
axios.get('/ads')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

```
I recommend you install axios.

* Learn more <https://www.npmjs.com/package/axios>
* Using:

```js
useEffect(() => {
  const getAds = async () => {
    const res = await axios.get('/ads')
    console.log(res.data)
  }
  getAds()
}, [])

```