React Hooks: How to make a POST request to server - node.js

Question

I am a beginner.I am trying to implement a POST request from React.js in a simple form, but I cannot figure out how to send POST request to database. I guess I need <form action="URL"> as well.
Any help will be appreciated.
Below is the code from React.js(frontend)
import GameTestResult from './GameTestResult';
export default function App() {
const[data, setData] = useState([]);
const [formData, setFormData] = useState("");
useEffect (() => {
fetch('http://localhost:3000/game')
.then(res => res.json())
.then(result => setData(result.rows))
.catch(err => console.log("error"))
},[]);
const handleChange = event => {
setFormData(event.target.value)
}
const eventHandler = event => {
event.preventDefault();
setFormData("");
}
return (
<div className="App">
<form method="post" onSubmit = {eventHandler}>
<input value = {formData} onChange = {handleChange} />
<button type="submit">click</button>
</form>
{data && data.map((element, index)=>(
<GameTestResult
name = {element.name}
key={element.index}
/>
))}
</div>
);
}
here is the code from express.js(backend)
var router = express.Router();
const pool = require("../config.js");
var cors = require('cors');
router.get("/game", cors(), (req, res) => {
pool
.query("SELECT * FROM game")
.then((data) => res.json(data))
.catch((e) => {
res.sendStatus(404), console.log(e);
});
});
router.post("/game", (req, res) => {
const { name } = req.body;
pool
.query('INSERT INTO game(name) values($1);', [name])
.then(data => res.status(201).json(data))
.catch(e => res.sendStatus(404));
});
module.exports = router;

Answer 1

Here is what you can do:
Fetch games when component is mounted. And Submit new game when form is submitted.
export default function App() {
const [data, setData] = useState([])
const [formData, setFormData] = useState('')
useEffect(() => {
fetchGames() // Fetch games when component is mounted
}, [])
const fetchGames = () => {
fetch('http://localhost:3000/game', {
method: 'GET',
})
.then((res) => res.json())
.then((result) => setData(result.rows))
.catch((err) => console.log('error'))
}
const saveGames = () => {
fetch('http://localhost:3000/game', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: formData, // Use your own property name / key
}),
})
.then((res) => res.json())
.then((result) => setData(result.rows))
.catch((err) => console.log('error'))
}
const handleSubmit = (event) => {
event.preventDefault()
saveGames() // Save games when form is submitted
}
const handleChange = (event) => {
setFormData(event.target.value)
}
return (
<div className="App">
{/* method="post" not needed here because `fetch` is doing the POST not the `form` */}
{/* Also, note I changed the function name, handleSubmit */}
<form onSubmit={handleSubmit}>
<input type="text" name="name" value={formData} onChange={handleChange} />
<button type="submit">click</button>
</form>
{data &&
data.map((element, index) => (
<GameTestResult name={element.name} key={element.index} />
))}
</div>
)
}
You can read this about how to use fetch and this about how forms work in RecatJS.

Answer 2

Add name as "name" to input
Listen onChange and set data setFormData({[event.target.key]: event.target.value}) the data will be for example {name: "Tony"}
Call POST request on onClick action of button like code below
JSON.stringify(data) is important to convert js object to JSON when sending it to server
import GameTestResult from './GameTestResult'
export default function App() {
const [data, setData] = useState([])
const [formData, setFormData] = useState({})
useEffect(() => {
fetch('http://localhost:3000/game')
.then((res) => res.json())
.then((result) => setData(result.rows))
.catch((err) => console.log('error'))
}, [])
const handleChange = (event) => {
setFormData({ [event.target.name]: event.target.value })
}
const eventHandler = (event) => {
fetch('http://localhost:3000/game', {
method: 'POST',
body: JSON.stringify(formData),
})
.then((res) => res.json())
.then((result) => {
console.log(result)
setFormData('')
})
.catch((err) => console.log('error'))
}
return (
<div className="App">
<form>
<input name="name" value={formData.name || ''} onChange={handleChange} />
<button onClick={eventHandler}>click</button>
</form>
{data &&
data.map((element, index) => (
<GameTestResult name={element.name} key={element.index} />
))}
</div>
)
}