title: How to GET data from mongoDB ATLAS and display in React App
body: <p>I am new to MERN stack and been working on a project that uses different driver information entered from the user and display that information back to the user in a table. I have successfully connected to MongoDB Atlas and also can enter data using my front end but I can't seem to figure out how to retrieve the data back to the front end. Can y'all help me fetch the data back and how I can present it in a tabular format.
  Thanks in advance.</p>
  <pre><code>//driver model
  onst mongoose = require('mongoose');
  const DriverSchema = new mongoose.Schema({
      name:{type: String, required:true},
      email:{type: String, required:true},
      phone:{type: Number, required:true},
      address:{type:String, required:true},
      country:{type: String, required:true}
  });
  
  const DriverModel = mongoose.model(&quot;drivers&quot;, DriverSchema)
  module.exports = DriverModel;
  
  </code></pre>
  <pre><code>//routes
  const router= require('express').Router();
  let Driver = require('../models/driver');
  
  router.route('/getDrivers').get((req, res) =&gt;{
      Driver.find()
      .then(drivers =&gt; res.json(drivers))
      .catch(err =&gt; res.status(400).json('Error: '+ err));
  
  }
  )
  
  router.route('/createDrivers').post((req, res) =&gt; {
      const name = req.body.name;
      const email = req.body.email;
      const phone = req.body.phone;
      const address = req.body.address;
      const country =req.body.country;
      const newDriver = new Driver({name, email, phone, address, country});
    
      newDriver.save()
        .then(() =&gt; res.json('Driver added!'))
        .catch(err =&gt; res.status(400).json('Error: ' + err));
    });
    
    router.route('/:id').get((req,res)=&gt; {
        Driver.findById(req.params.id)
        .then(drivers =&gt; res.json(drivers))
        .catch(err =&gt; res.status(400).json('Error: ' + err));
    })
  
    router.route('/:id').delete((req, res) =&gt; {
      Driver.findByIdAndDelete(req.params.id)
        .then(() =&gt; res.json('Driver deleted.'))
        .catch(err =&gt; res.status(400).json('Error: ' + err));
    });
  
    router.route('/update/:id').post((req, res) =&gt; {
      Driver.findById(req.params.id)
        .then(driver =&gt; {
          driver.name = req.body.name;
          driver.email = req.body.email;
          driver.phone = req.body.phone;
          driver.address = req.body.address;
          driver.country =req.body.country;
    
          driver.save()
            .then(() =&gt; res.json('Driver updated!'))
            .catch(err =&gt; res.status(400).json('Error: ' + err));
        })
        .catch(err =&gt; res.status(400).json('Error: ' + err));
    });
  
    module.exports = router; 
  </code></pre>
  <pre><code>//frontend
  import React from 'react';
  import Sidebar from '../../components/sidebar/Sidebar';
  import Navbar from '../../components/navbar/Navbar';
  import { useEffect, useState } from 'react';
  import &quot;./dbtrial.scss&quot; ;
  import Axios from &quot;axios&quot;;
  function Dbtrial() {
      
      const [listOfDrivers, setListOfDrivers]= useState([]);
      const [name, setName] = useState(&quot;&quot;);
      const [email, setEmail] = useState(&quot;&quot;);
      const [phone, setPhone] = useState(0);
      const [address, setAddress] = useState(&quot;&quot;);
      const [country, setCountry] = useState(&quot;&quot;);
  
      useEffect(() =&gt; {
        const fetchDrivers= async () =&gt;{
          try{
            const response = await fetch(&quot;http://localhost:3001/driver/getDrivers&quot;)
            if(!response.ok) throw Error('Did not recieve expected data');
            const listDrivers = await response.json();
            console.log(listDrivers);
            setListOfDrivers(listDrivers);
            setFetchError(null);
          } catch(err){
            setFetchError(err.message)
          }
        }
        setTimeout(() =&gt; {
          (async () =&gt; await fetchDrivers())();
        }, 2000)
        //(async () =&gt; await fetchDrivers())();
      }, [])
          
      const createDrivers = () =&gt;{
        Axios.post(&quot;http://localhost:3001/createDrivers&quot;, {
          name, 
          email, 
          phone, 
          address,
          country,
        }).then((response) =&gt;{
          setListOfDrivers([...listOfDrivers,
          {
            name, email, phone, address,
            country,
          },
        ]);
          //alert(&quot;Driver added!&quot;);
        });
      } 
      
      return (
          &lt;div className=&quot;db&quot;&gt;
              &lt;Sidebar /&gt;
              &lt;div className=&quot;dbq&quot;&gt;
                  &lt;Navbar /&gt;
                  &lt;div className=&quot;formInput&quot;&gt;
                      &lt;label&gt;Name&lt;/label&gt;
                      &lt;input type=&quot;text&quot; placeholder=&quot;name&quot;  onChange={(event) =&gt; {
                        setName(event.target.value);
                        }} /&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;formInput&quot;&gt;
                      &lt;label&gt;Email&lt;/label&gt;
                      &lt;input type=&quot;email&quot; placeholder=&quot;email&quot;  onChange={(event)=&gt; {setEmail(event.target.value);}}/&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;formInput&quot;&gt;
                      &lt;label&gt;Phonenumber&lt;/label&gt;
                      &lt;input type=&quot;text&quot; placeholder=&quot;0923668881 &quot;  onChange={(event) =&gt; {setPhone(event.target.value);}}/&gt;
                      &lt;/div&gt;
                  &lt;div className=&quot;formInput&quot;&gt;
                      &lt;label&gt;Address&lt;/label&gt;
                      &lt;input type=&quot;text&quot; placeholder=&quot;Addis Ababa&quot; onChange={(event)=&gt; {setAddress(event.target.value);}}/&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;formInput&quot;&gt;
                      &lt;label&gt;Country&lt;/label&gt;
                      &lt;input type=&quot;text&quot; placeholder=&quot;country&quot; onChange={(event) =&gt; {setCountry(event.target.value);}}/&gt;
                      &lt;button type=&quot;submit&quot; onClick={createDrivers}&gt;Send&lt;/button&gt;
                  &lt;/div&gt;
                  
              &lt;/div&gt;
              
          &lt;/div&gt;
      )
  }
  
  export default Dbtrial
  </code></pre>