A Simple MERN Full Stack Application

Main.js

import React, { useState, useEffect } from 'react';
import axios from 'axios'

function Main() {

    const [data,setdata] = useState([])

    useEffect(() => {
        async function fetchData() {
            const res = await axios.get("https://user-details-mern.herokuapp.com/details")
            setdata(res.data)
        }
        fetchData()
    })

    return (
        <div className="Main">
            <table>
                <tr>
                    <th>Name</th>
                    <th>FullName</th>
                    <th>Address</th>
                    <th>Phone Number</th>
                    <th>Email Id</th>
                </tr>
                {data.map((item) => (
                    <tr>
                        <td>{item.Name}</td>
                        <td>{item.FName}</td>
                        <td>{item.Address}</td>
                        <td>{item.PhonNo}</td>
                        <td>{item.Email}</td>
                    </tr>
                ))}
            </table>

        </div>
    )
}

export default Main;