React UPDATE (PUT) FORM

 import React, { useEffect } from "react";

import axios from "axios";

import {useState} from 'react';

function UpdateForm(){

   const [city,setCity] = useState('');

   const [state,setState] = useState('');

   const [country,setCountry] = useState('');

    useEffect(()=>{

// below code will show on form the data form django api

        axios.put(`http://localhost:8000/update/6/`)

        .then((response)=>{

            setCity(response.data.city);

            setState(response.data.state);

            setCountry(response.data.country);

        })

    },[])

// below handlechange will change data to latest data

    const handleChange = (e) => {

        const { name, value } = e.target;

        if (name === 'city') {

          setCity(value);

        } else if (name === 'state') {

          setState(value);

        } else if (name === 'country') {

          setCountry(value);

        }

      };

// below submit handle will update data on django api

    let handleSubmit = (e)=>{

        e.preventDefault();

        console.log(city,state,country);

        axios.put(`http://localhost:8000/update/6/`,{city,state,country})

        .then((response)=>{

            setCity(city);

            setState(state);

            setCountry(country);

        })

    }

// form for data showing

    return (

        <form method="POST" onSubmit={handleSubmit}>

            <input type="text"

            value={city}

            name="city"

            onChange={handleChange}

            />

            <input type="text"

            value={state}

            name="state"

            onChange={handleChange}

            />

            <input type="text"

            value={country}

            name="country"

            onChange={handleChange}

            />

            <button type="submit">submit</button>

        </form>

    )

}

export default UpdateForm;