React GET FORM

 import React, { useState, useEffect } from "react";

import axios from "axios";

import UpdateForm from "./UpdateForm";

function GetDjango(){

    const [data, setData] = useState([]);

    useEffect(()=>{

        axios.get(`http://127.0.0.1:8000/home`)

        .then(response=>{

            setData(response.data);

        })

        .catch(error=>{

            console.error(error);

        });

    },[]);

    return (

        <>

        <h1>Django API With React JS</h1>

        <table border="1">

            <thead>

                <tr>

                    <th>ID</th>

                    <th>City</th>

                    <th>State</th>

                    <th>Country</th>

                </tr>

            </thead>

            <tbody>

                {data.map(m => (

                    <tr key={m.id}>

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

                        <td>{m.city}</td>

                        <td>{m.state}</td>

                        <td>{m.country}</td>

                        <td><a href={`http://localhost:8000/update/${m.id}`}>Update</a></td>

                        <td><a href={`http://localhost:8000/delete/${m.id}`}>Delete</a></td>

                    </tr>

                ))}

            </tbody>

        </table>

        </>

    );

}

export default GetDjango;