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

user_15386225 0
Viewed 51

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>
    )
}

react-router reactjs
1 Answers

Its because you aren't preventing the default of your form so it is still getting processed as a GET request. If you had put values into the input fields you would of also seen those in your url.

Just include the event and prevent the default in your createNewLocation function

    const createNewLocation = (event) => {
        event.preventDefault();
        // Rest of your code
    }
user_82182030
Related