How can I pass variables from my post to my get?
I am using react/express.
I have a simple web page that takes user input and uses axios.post
. In my backend, I need to create a file in my get
.
I haven't been able to get the return function to work, I don't want to use a global variable as it has caused errors before.
Is there something I'm missing? How can I access variables get
in my request from within my request post
.
frontend.js
import React from 'react';
import { useState, useEffect } from "react";
import Calendar from 'react-calendar';
//import 'react-calendar/dist/Calendar.css';
import Axios from 'axios';
const CalendarApp = () => {
var [selectedDate, newDate] = useState(new Date());
const [event, newEvent] = useState("")
const [userEvent, setUserEvent] = useState("")
const [userEventList, setUserEventList] = useState([])
const [newUserEvent, setNewUserEvent] = useState("")
//Add event to DB
const addUserEvent = () => {
var userDate = (selectedDate + "").slice(3, 16);
console.log("From addUserEvent", userDate)
if (userEvent === "") {
//alert("Please enter event")
}
else {
Axios.post("http://localhost:3001/send", {
userEvent: userEvent, userDate: userDate
}).then(() => {
//setUserEventList([...userEventList, { userEvent: userEvent, userDate: userDate}])
});
// changes the event list depending on what date the user clicks
document.getElementById('ui').value = '';
setUserEvent(userEvent => userEvent = "")
}
};
const getUserEvent = (userDate) => {
Axios.get("http://localhost:3001/getData").then((response) => {
setUserEventList(response.data)
console.log("response.data: ", response.data)
});
};
}
backend.js
//Setting up express, similar to flask
const express = require('express');
const app = express()
const mysql = require('mysql');
const cors = require('cors')
//Setting up SQL, hide password properly
const db = mysql.createConnection({
host:'localhost',
user: 'root',
password: '******',
database: 'calendardb',
});
app.use(cors());
app.use(express.json());
// insert information in to DB
app.post('/send',(req,res) =>{
const userEvent = req.body.userEvent
const userDate = req.body.userDate //<---- Access this variable from the get below
currentDate = req.body.userDate
console.log("FROM DB ADD",userDate,"d",currentDate)
db.query('INSERT INTO calevent (userEvent, userDate) VALUES (?,?)',
[userEvent,userDate], (err,result) =>{
if(err){
console.log(err)
} else{
res.send("Data send to DB")
}
}
);
});
//Getting Specific data from DB
app.get("/getData",(req, res) =>{
db.query("SELECT * FROM calevent WHERE userDate = ?", [userDate], (err, result) => {
if(err){
console.log(err)
}else{
res.send(result)
}
console.log(result)
});
});
REST calls are stateless, which means that each request must be independent of state. If your goal is a RESTful service, I recommend against this. Although, saving it in a session ( express-session ) or something like that would work, I would recommend adding that along with the param userDate
in the get call (since GET requests won't have a body). You've userDate
sent the getUserEvent
function an unused parameter , similar to this.
Axios.get("http://localhost:3001/getData", { params: { userDate }} )