I have been diving into the world of React and recently ventured into working with expressJS. However, I encountered an issue with the POST method as the data is not being successfully posted to the server. While I believe my fetching of the post method is correct, the problem might lie within my express file. I have also set a proxy in JsonFile. Perhaps there's something that I am overlooking.
const express = require('express')
const app = express()
const port = 3001
const bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static("public"));
app.get('/users', (req, res) => {
res.json(cars);
})
// GET method route
app.get('/info', (req, res) => {
res.send(console.log(req))
})
// GET method route
app.get('/', (req, res) => {
res.send('Hello this is John Server')
})
// POST method route
app.post('/info', function (req, res) {
const info = {
first_name: req.body.name
};
console.log(info)
})
app.listen(port, () => {
console.log(`Example app listening on port ${port}`)
})import React from 'react'
class UserForm extends React.Component {
constructor(props) {
super(props);
this.state = { name: '' };
}
handleChange = (event) => {
this.setState({ [event.target.name]: event.target.value });
}
handleSubmit = (event) => {
alert('A form was submitted: ' + this.state);
fetch('/info', {
method: 'POST',
// We convert the React state to JSON and send it as the POST body
body: JSON.stringify(this.state)
}).then(function (response) {
console.log(response)
return response.json();
});
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} name="name" onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
export default UserForm;