How do I pass a variable or string or object into the backend in React?-CodePudding

So I'm trying to pass an object holding a string using a variable called place as you can see here.

const [finalOption, setFinalOption] = useState("")
useEffect(() =>{
        const place = {
            finalOption
        }
        axios.get("http://localhost:8000/api/maps", place)
        .then(res => {
            setGooglePlaces(res.data)
        })
        .catch(err => console.log(err))
    }, [])

finalOption is holding a string which I want to use later on on the backend right here using string concatenation in order for the Google API search to search up locations based off the string. The string in this case isn't important because it changes based on user input however the variable place that I made in the frontend is not defined in the backend and isn't being passed. Anyone have any ideas?

const string = place

module.exports.getAll = (req, res) => {
    axios.get(`https://maps.googleapis.com/maps/api/place/textsearch/json?query=${string} in Brooklyn&key`)
            .then(response => {
                res.json(response.data.results)
                console.log("google maps",res)
            })
            .catch(err => {
                res.status(400).json(err)
                console.log(err);
            })
}

So on the backend I added in on line 2 a new variable using what I think is the body parser which seems to be working.

module.exports.getAll = (req, res) => {
    const string = (req.body.place)
    axios.post(`https://maps.googleapis.com/maps/api/place/textsearch/json?query=${string} in Brooklyn&key=`)
            .then(response => {
                res.json(response.data.results)
                console.log("google maps",res)
            })
            .catch(err => {
                res.status(400).json(err)
                console.log(err);
            })
}

So another update the change in the backend is not working at all. Back to square one.

So I added in this console.log

const string = (req.body)
console.log(string)

and it returns to me as {finalOption : ''}. Its getting finalOption now which is good however finalOption is holding an empty string. I console logged finalOption on the frontend and its definitely holding a string. Why does it become empty on the backend?

CodePudding user response：

You want to send an object to the backend in the body. You should be looking at using a post instead of a get

const [finalOption, setFinalOption] = useState("")
useEffect(() =>{
        const place = {
            finalOption
        }
        axios.post("http://localhost:8000/api/maps", place)
        .then(res => {
            setGooglePlaces(res.data)
        })
        .catch(err => console.log(err))
    }, [])

CodePudding user response：

You can use query parameters to send the string to the backend

axios.get("http://localhost:8000/api/maps", {params: {finalOption}})

If you want to send the data in body, you should use POST method instead of GET

axios.post("http://localhost:8000/api/maps", {finalOption})

CodePudding user response：

So I kept messing around with it for another few hours and thanks to LordBee for pointing me in the right direction with the req.body I was able to come up with the solution. The useEffect on the front end was initializing before the useState was set so that is why it was giving me an empty string. So I put finalOption in the second part of the useEffect so that it runs it twice and gives me a complete string on the second run. On the backend side of things I was attempting to concatenate a object into the url not a string so I had to do a for(const property in object) in order to pull out that specfic keys value which in this case is finalOption and then assign that value to a variable which I was able to then concatenate it to the url. Sorry for the long message lol, thank you everyone for the help.