? shows up on url for unknown reason after creating data on React.js

  react-router, reactjs

I am using react.js for my frontend, right now working on one component. It is used to create a new data and display all data.

I am using
http://localhost:3000/locations
screenshot before create

after creating data successfully, suddenly url becomes
http://localhost:3000/locations**?**
screenshot after create
I am wondering where is this ? question mark coming from, also I notice on my browser consolelog, the page is doing a fresh reload every time

I started the file with npx create-react-app, only modified App.js and Location.js

See App.js
enter image description here

See code for Location.js

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



export default function Location() {

    const [locations, setLocations] = useState([])
    const [locationname, setLocationname] = useState("")
    const [latitude, setLatitude] = useState("")
    const [longitude, setLongitude] = useState("")

    const createNewLocation = () => {
        const createLocation = async () => {
            const {data} = await axios.post("/api/locations", {locationname, coordinates: {latitude, longitude}} ,{headers: {"content-type": "application/json"}})
            console.log("data", data)
            setLocationname(locationname)
            setLatitude(latitude)
            setLongitude(longitude)
        }
        console.log("the click")
        createLocation()
    }

    useEffect(()=>{
        const getLocations = async() => {
            const {data} = await axios.get("/api/locations", {headers: {"content-type": "application/json"}})
            console.log(data)
            setLocations(data) 
        }
        getLocations()
    }, []) 

    return (
        <div>
            <form onSubmit={createNewLocation}>
                <label> locationname </label>
                <input type="text" value={locationname} onChange={(e)=>{setLocationname(e.target.value)}}/> <br></br>
                <label> latitude </label>
                <input type="text" value= {latitude} onChange={(e)=>{setLatitude(e.target.value)}}/> <br></br>
                <label> longitude </label>
                <input type="text" value= {longitude} onChange={(e)=>{setLongitude(e.target.value)}}/> <br></br>
                <button type="submit"> Add a new location </button>
            </form>
            
            <p> The current locations </p>
            <table>
                <tr>
                    <th> Facility Name </th>
                    <th> Latitude </th>
                    <th> Longitude </th>
                </tr>
            {locations.map(
                location => 
                (<tr key={location.name}>  
                <td> {location.locationname} </td>
                <td> {location.coordinates.latitude} </td>
                <td> {location.coordinates.longitude} </td>
                </tr>)
            )}
            </table>
            
        </div>
    )
}

Source: React Router Questions

LEAVE A COMMENT