title: How can I fetch data from mongoDB and display it on react front end
body: <p>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?</p>
  <p><strong>My Backend API code</strong></p>
  <pre><code>router.get('/ads', async (req,res,next)=&gt;{
    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' });
    }
  });
  </code></pre>
  <p><a href="https://i.stack.imgur.com/ZNjeF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZNjeF.png" alt="image" /></a></p>