Can't post data to Express using React
This is my first time trying to make a full stack app. I already have experience with Django but now i wanted to try using Express.js
So, i made this simple route in express:
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var logger = require('morgan');
var User = require('../User/User');
app.use(logger("short"));
app.post("/addUser", (req, res) => {
User.create({
name: req.body.name,
email: req.body.email,
password: req.body.password
}, (err, user) => {
if (err) return res.status(500).json({auth: false})
res.status(200).json(
{
email,
name
}
);
});
});
this is the User schema:
const mongoose = require("mongoose")
const Schema = mongoose.Schema;
const UserSchema = new Schema(
{
name: String,
email: String,
password: String,
},
{timestamps: true}
);
mongoose.model("User", UserSchema);
module.exports = mongoose.model("User");
I already tried doing some post requests using insomnia. They all worked
But when i make a post request using react it creates an object but its name, email, password fields are empty, like this:
createdAt: "2018-11-22T16:59:51.844Z"
updatedAt: "2018-11-22T16:59:51.844Z"
__v: 0
_id: "5bf6e0878bd6663807e57dec"
this is my react code - it's in a func that's called when the form is submitted - (I already added the express server as a proxy):
axios.post('/api/auth/addUser', {
name: register_name,
email: register_email,
password: register_password
})
.then(res => res.json())
.catch(err => console.log(err))
I get code 200 on express' console but the obj doesn't have any data.
Can you help me? - I'm still a beginner to React and Express
Edit: React Component
import React, { Component } from 'react';
import axios from 'axios';
export default class Register extends Component {
constructor(props) {
super(props)
this.state = {
register_name: "",
register_email: "",
register_password: ""
}
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({[event.target.name]: event.target.value})
}
handleSubmit(event) {
event.preventDefault();
const { register_name, register_email, register_password } = this.state
axios.post('/api/auth/addUser', {
name: register_name,
email: register_email,
password: register_password
})
.then(res => res.json())
.catch(err => console.log(err))
console.log(this.state)
this.clearInputs();
}
render() {
return (
<div>
<form method={"POST"} onSubmit={this.handleSubmit} id={"register-form"}>
<label htmlFor={"register_name"}></label>
<input type={"text"} name={"register_name"} id={"register_name"} placeholder={"name"} value={this.state.register_name} onChange={this.handleChange}></input>
<label htmlFor={"register_email"}>Email</label>
<input type={"email"} name={"register_email"} id={"register_email"} placeholder={"email"} value={this.state.register_email} onChange={this.handleChange}></input>
<label htmlFor={"register_password"} >Password</label>
<input type={"password"} name={"register_password"} id={"register_password"} placeholder={"password"} value={this.state.register_password} onChange={this.handleChange}></input>
<button type={"submit"}>Submit</button>
</form>
</div>
)
}
}
javascript reactjs express axios
add a comment |
This is my first time trying to make a full stack app. I already have experience with Django but now i wanted to try using Express.js
So, i made this simple route in express:
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var logger = require('morgan');
var User = require('../User/User');
app.use(logger("short"));
app.post("/addUser", (req, res) => {
User.create({
name: req.body.name,
email: req.body.email,
password: req.body.password
}, (err, user) => {
if (err) return res.status(500).json({auth: false})
res.status(200).json(
{
email,
name
}
);
});
});
this is the User schema:
const mongoose = require("mongoose")
const Schema = mongoose.Schema;
const UserSchema = new Schema(
{
name: String,
email: String,
password: String,
},
{timestamps: true}
);
mongoose.model("User", UserSchema);
module.exports = mongoose.model("User");
I already tried doing some post requests using insomnia. They all worked
But when i make a post request using react it creates an object but its name, email, password fields are empty, like this:
createdAt: "2018-11-22T16:59:51.844Z"
updatedAt: "2018-11-22T16:59:51.844Z"
__v: 0
_id: "5bf6e0878bd6663807e57dec"
this is my react code - it's in a func that's called when the form is submitted - (I already added the express server as a proxy):
axios.post('/api/auth/addUser', {
name: register_name,
email: register_email,
password: register_password
})
.then(res => res.json())
.catch(err => console.log(err))
I get code 200 on express' console but the obj doesn't have any data.
Can you help me? - I'm still a beginner to React and Express
Edit: React Component
import React, { Component } from 'react';
import axios from 'axios';
export default class Register extends Component {
constructor(props) {
super(props)
this.state = {
register_name: "",
register_email: "",
register_password: ""
}
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({[event.target.name]: event.target.value})
}
handleSubmit(event) {
event.preventDefault();
const { register_name, register_email, register_password } = this.state
axios.post('/api/auth/addUser', {
name: register_name,
email: register_email,
password: register_password
})
.then(res => res.json())
.catch(err => console.log(err))
console.log(this.state)
this.clearInputs();
}
render() {
return (
<div>
<form method={"POST"} onSubmit={this.handleSubmit} id={"register-form"}>
<label htmlFor={"register_name"}></label>
<input type={"text"} name={"register_name"} id={"register_name"} placeholder={"name"} value={this.state.register_name} onChange={this.handleChange}></input>
<label htmlFor={"register_email"}>Email</label>
<input type={"email"} name={"register_email"} id={"register_email"} placeholder={"email"} value={this.state.register_email} onChange={this.handleChange}></input>
<label htmlFor={"register_password"} >Password</label>
<input type={"password"} name={"register_password"} id={"register_password"} placeholder={"password"} value={this.state.register_password} onChange={this.handleChange}></input>
<button type={"submit"}>Submit</button>
</form>
</div>
)
}
}
javascript reactjs express axios
any console entries? maybe a CORS issue?
– luschn
Nov 22 at 17:22
You are taking the info to submit from the state of the componentname: this.state.name
etc, are you sure it is correctly populated ? Show the code of that component.
– Gabriele Petrioli
Nov 22 at 17:22
Just added the code of the component
– Abel Hristodor
Nov 22 at 17:34
add a comment |
This is my first time trying to make a full stack app. I already have experience with Django but now i wanted to try using Express.js
So, i made this simple route in express:
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var logger = require('morgan');
var User = require('../User/User');
app.use(logger("short"));
app.post("/addUser", (req, res) => {
User.create({
name: req.body.name,
email: req.body.email,
password: req.body.password
}, (err, user) => {
if (err) return res.status(500).json({auth: false})
res.status(200).json(
{
email,
name
}
);
});
});
this is the User schema:
const mongoose = require("mongoose")
const Schema = mongoose.Schema;
const UserSchema = new Schema(
{
name: String,
email: String,
password: String,
},
{timestamps: true}
);
mongoose.model("User", UserSchema);
module.exports = mongoose.model("User");
I already tried doing some post requests using insomnia. They all worked
But when i make a post request using react it creates an object but its name, email, password fields are empty, like this:
createdAt: "2018-11-22T16:59:51.844Z"
updatedAt: "2018-11-22T16:59:51.844Z"
__v: 0
_id: "5bf6e0878bd6663807e57dec"
this is my react code - it's in a func that's called when the form is submitted - (I already added the express server as a proxy):
axios.post('/api/auth/addUser', {
name: register_name,
email: register_email,
password: register_password
})
.then(res => res.json())
.catch(err => console.log(err))
I get code 200 on express' console but the obj doesn't have any data.
Can you help me? - I'm still a beginner to React and Express
Edit: React Component
import React, { Component } from 'react';
import axios from 'axios';
export default class Register extends Component {
constructor(props) {
super(props)
this.state = {
register_name: "",
register_email: "",
register_password: ""
}
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({[event.target.name]: event.target.value})
}
handleSubmit(event) {
event.preventDefault();
const { register_name, register_email, register_password } = this.state
axios.post('/api/auth/addUser', {
name: register_name,
email: register_email,
password: register_password
})
.then(res => res.json())
.catch(err => console.log(err))
console.log(this.state)
this.clearInputs();
}
render() {
return (
<div>
<form method={"POST"} onSubmit={this.handleSubmit} id={"register-form"}>
<label htmlFor={"register_name"}></label>
<input type={"text"} name={"register_name"} id={"register_name"} placeholder={"name"} value={this.state.register_name} onChange={this.handleChange}></input>
<label htmlFor={"register_email"}>Email</label>
<input type={"email"} name={"register_email"} id={"register_email"} placeholder={"email"} value={this.state.register_email} onChange={this.handleChange}></input>
<label htmlFor={"register_password"} >Password</label>
<input type={"password"} name={"register_password"} id={"register_password"} placeholder={"password"} value={this.state.register_password} onChange={this.handleChange}></input>
<button type={"submit"}>Submit</button>
</form>
</div>
)
}
}
javascript reactjs express axios
This is my first time trying to make a full stack app. I already have experience with Django but now i wanted to try using Express.js
So, i made this simple route in express:
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var logger = require('morgan');
var User = require('../User/User');
app.use(logger("short"));
app.post("/addUser", (req, res) => {
User.create({
name: req.body.name,
email: req.body.email,
password: req.body.password
}, (err, user) => {
if (err) return res.status(500).json({auth: false})
res.status(200).json(
{
email,
name
}
);
});
});
this is the User schema:
const mongoose = require("mongoose")
const Schema = mongoose.Schema;
const UserSchema = new Schema(
{
name: String,
email: String,
password: String,
},
{timestamps: true}
);
mongoose.model("User", UserSchema);
module.exports = mongoose.model("User");
I already tried doing some post requests using insomnia. They all worked
But when i make a post request using react it creates an object but its name, email, password fields are empty, like this:
createdAt: "2018-11-22T16:59:51.844Z"
updatedAt: "2018-11-22T16:59:51.844Z"
__v: 0
_id: "5bf6e0878bd6663807e57dec"
this is my react code - it's in a func that's called when the form is submitted - (I already added the express server as a proxy):
axios.post('/api/auth/addUser', {
name: register_name,
email: register_email,
password: register_password
})
.then(res => res.json())
.catch(err => console.log(err))
I get code 200 on express' console but the obj doesn't have any data.
Can you help me? - I'm still a beginner to React and Express
Edit: React Component
import React, { Component } from 'react';
import axios from 'axios';
export default class Register extends Component {
constructor(props) {
super(props)
this.state = {
register_name: "",
register_email: "",
register_password: ""
}
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({[event.target.name]: event.target.value})
}
handleSubmit(event) {
event.preventDefault();
const { register_name, register_email, register_password } = this.state
axios.post('/api/auth/addUser', {
name: register_name,
email: register_email,
password: register_password
})
.then(res => res.json())
.catch(err => console.log(err))
console.log(this.state)
this.clearInputs();
}
render() {
return (
<div>
<form method={"POST"} onSubmit={this.handleSubmit} id={"register-form"}>
<label htmlFor={"register_name"}></label>
<input type={"text"} name={"register_name"} id={"register_name"} placeholder={"name"} value={this.state.register_name} onChange={this.handleChange}></input>
<label htmlFor={"register_email"}>Email</label>
<input type={"email"} name={"register_email"} id={"register_email"} placeholder={"email"} value={this.state.register_email} onChange={this.handleChange}></input>
<label htmlFor={"register_password"} >Password</label>
<input type={"password"} name={"register_password"} id={"register_password"} placeholder={"password"} value={this.state.register_password} onChange={this.handleChange}></input>
<button type={"submit"}>Submit</button>
</form>
</div>
)
}
}
javascript reactjs express axios
javascript reactjs express axios
edited Nov 22 at 18:59
asked Nov 22 at 17:16
Abel Hristodor
125
125
any console entries? maybe a CORS issue?
– luschn
Nov 22 at 17:22
You are taking the info to submit from the state of the componentname: this.state.name
etc, are you sure it is correctly populated ? Show the code of that component.
– Gabriele Petrioli
Nov 22 at 17:22
Just added the code of the component
– Abel Hristodor
Nov 22 at 17:34
add a comment |
any console entries? maybe a CORS issue?
– luschn
Nov 22 at 17:22
You are taking the info to submit from the state of the componentname: this.state.name
etc, are you sure it is correctly populated ? Show the code of that component.
– Gabriele Petrioli
Nov 22 at 17:22
Just added the code of the component
– Abel Hristodor
Nov 22 at 17:34
any console entries? maybe a CORS issue?
– luschn
Nov 22 at 17:22
any console entries? maybe a CORS issue?
– luschn
Nov 22 at 17:22
You are taking the info to submit from the state of the component
name: this.state.name
etc, are you sure it is correctly populated ? Show the code of that component.– Gabriele Petrioli
Nov 22 at 17:22
You are taking the info to submit from the state of the component
name: this.state.name
etc, are you sure it is correctly populated ? Show the code of that component.– Gabriele Petrioli
Nov 22 at 17:22
Just added the code of the component
– Abel Hristodor
Nov 22 at 17:34
Just added the code of the component
– Abel Hristodor
Nov 22 at 17:34
add a comment |
3 Answers
3
active
oldest
votes
There's a series of potential problems here. First, there's no particular need to make a urlencoded form submission here: just use JSON. Your submit could then look something like:
handleSubmit (e) {
e.preventDefault()
const { email, name, password } = this.state
axios.post('/api/auth/adduser', {
email,
name,
password
})
.then(res => /* ... */)
.catch(err => /* ... */)
}
On the server, you're probably after res.json
rather than res.send
.
const { email, name, password } = req.body
// ...
res.status(201).json({
email,
name
})
Also note that you don't need bodyParser
these days (you can just use express.json()
).
Finally, you should use event.target.name
in your handleChange
as the names match the names of your values in component state:
handleChange (e) {
this.setState({ [e.target.name]: event.target.value })
}
Simple example
Client:
const CLEAR_STATE = {
email: '',
name: '',
password: '',
message: ''
}
export default class App extends Component {
state = CLEAR_STATE
handleChange = e => this.setState({
[ e.target.name ]: e.target.value
})
handleSubmit = e => {
e.preventDefault()
const { email, name, password } = this.state
axios.post('/', { email, name, password })
.then(({ data }) => this.setState({
...CLEAR_STATE,
message: `You sent: ${data.email}, ${data.name}, ${data.password}.`
}))
.catch(({ message }) => this.setState({ message }))
}
render () {
return (
<>
<form onSubmit={this.handleSubmit}>
<input
type='text'
name='email'
value={this.state.email}
onChange={this.handleChange} />
<input
type='text'
name='name'
value={this.state.name}
onChange={this.handleChange} />
<input
type='password'
name='password'
value={this.state.password}
onChange={this.handleChange} />
<input type='submit' value='Register' />
</form>
{this.state.message && <p>{this.state.message}</p>}
</>
)
}
}
Server:
app.use(express.json())
app.post('/', (req, res) => {
const { name, email, password } = req.body
res.status(201).json({ name, email, password })
})
Ok, changed everything but now i get status code 500 -Cannot read property 'register_name' of undefined ( i changed all the names to register_name ecc)
– Abel Hristodor
Nov 22 at 18:05
handleSubmit(event) { event.preventDefault(); const { register_name, register_email, register_password } = this.state axios.post('/api/auth/addUser', { name: register_name, email: register_email, password: register_password }) .then(res => res.json()) .catch(err => console.log(err)) console.log(this.state) this.clearInputs(); }
This is the handler
– Abel Hristodor
Nov 22 at 18:06
You appear to have skipped addingapp.use(express.json())
in your server-side code. This is why yourreq.body
is undefined.
– Rich Churcher
Nov 22 at 19:02
1
Oh haha thanks :)
– Abel Hristodor
Nov 22 at 19:26
add a comment |
You are using the [event.target.id]
of the changed input
element to update the state.
You state
expects name
,email
,password
but receives register_name
,register_email
,register_password
.
You should change the id
of the input
elements to match those in the state or you should use the name
attribute since that is what matches .
this.setState({[event.target.name]: event.target.value});
Keep in mind that the attribute htmlFor
of the label
elements also needs to match the id
and not the name
of the element it is linked to.
Also, you should have noticed that something was wrong since your code will not update the input
elements while you type.
oh yeah, forgot i changed them haha. Anyway, changed everything, same result
– Abel Hristodor
Nov 22 at 17:49
@AbelHristodor again you name the post parametersname
,email
,password
in theaxios
call, but in your server route you are usingreq.body.register_name
to access them.
– Gabriele Petrioli
Nov 22 at 18:54
okk, but now i get ` Cannot read property 'name' of undefined```
– Abel Hristodor
Nov 22 at 18:59
@AbelHristodor you needapp.use(express.json());
in your server side script.
– Gabriele Petrioli
Nov 22 at 19:08
Okk thanks :) I've been trying to solve this problem for a few days and it got very frustrating haha
– Abel Hristodor
Nov 22 at 19:25
add a comment |
Everything works out of the box with just bare fetch
.
Here is gist, just make sure you attached bodyParser to express instance
const bodyParser = require('body-parser');
...
app.use(bodyParser.json());
axios lib is useful if you want to upload physical files with FormData
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53435712%2fcant-post-data-to-express-using-react%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
There's a series of potential problems here. First, there's no particular need to make a urlencoded form submission here: just use JSON. Your submit could then look something like:
handleSubmit (e) {
e.preventDefault()
const { email, name, password } = this.state
axios.post('/api/auth/adduser', {
email,
name,
password
})
.then(res => /* ... */)
.catch(err => /* ... */)
}
On the server, you're probably after res.json
rather than res.send
.
const { email, name, password } = req.body
// ...
res.status(201).json({
email,
name
})
Also note that you don't need bodyParser
these days (you can just use express.json()
).
Finally, you should use event.target.name
in your handleChange
as the names match the names of your values in component state:
handleChange (e) {
this.setState({ [e.target.name]: event.target.value })
}
Simple example
Client:
const CLEAR_STATE = {
email: '',
name: '',
password: '',
message: ''
}
export default class App extends Component {
state = CLEAR_STATE
handleChange = e => this.setState({
[ e.target.name ]: e.target.value
})
handleSubmit = e => {
e.preventDefault()
const { email, name, password } = this.state
axios.post('/', { email, name, password })
.then(({ data }) => this.setState({
...CLEAR_STATE,
message: `You sent: ${data.email}, ${data.name}, ${data.password}.`
}))
.catch(({ message }) => this.setState({ message }))
}
render () {
return (
<>
<form onSubmit={this.handleSubmit}>
<input
type='text'
name='email'
value={this.state.email}
onChange={this.handleChange} />
<input
type='text'
name='name'
value={this.state.name}
onChange={this.handleChange} />
<input
type='password'
name='password'
value={this.state.password}
onChange={this.handleChange} />
<input type='submit' value='Register' />
</form>
{this.state.message && <p>{this.state.message}</p>}
</>
)
}
}
Server:
app.use(express.json())
app.post('/', (req, res) => {
const { name, email, password } = req.body
res.status(201).json({ name, email, password })
})
Ok, changed everything but now i get status code 500 -Cannot read property 'register_name' of undefined ( i changed all the names to register_name ecc)
– Abel Hristodor
Nov 22 at 18:05
handleSubmit(event) { event.preventDefault(); const { register_name, register_email, register_password } = this.state axios.post('/api/auth/addUser', { name: register_name, email: register_email, password: register_password }) .then(res => res.json()) .catch(err => console.log(err)) console.log(this.state) this.clearInputs(); }
This is the handler
– Abel Hristodor
Nov 22 at 18:06
You appear to have skipped addingapp.use(express.json())
in your server-side code. This is why yourreq.body
is undefined.
– Rich Churcher
Nov 22 at 19:02
1
Oh haha thanks :)
– Abel Hristodor
Nov 22 at 19:26
add a comment |
There's a series of potential problems here. First, there's no particular need to make a urlencoded form submission here: just use JSON. Your submit could then look something like:
handleSubmit (e) {
e.preventDefault()
const { email, name, password } = this.state
axios.post('/api/auth/adduser', {
email,
name,
password
})
.then(res => /* ... */)
.catch(err => /* ... */)
}
On the server, you're probably after res.json
rather than res.send
.
const { email, name, password } = req.body
// ...
res.status(201).json({
email,
name
})
Also note that you don't need bodyParser
these days (you can just use express.json()
).
Finally, you should use event.target.name
in your handleChange
as the names match the names of your values in component state:
handleChange (e) {
this.setState({ [e.target.name]: event.target.value })
}
Simple example
Client:
const CLEAR_STATE = {
email: '',
name: '',
password: '',
message: ''
}
export default class App extends Component {
state = CLEAR_STATE
handleChange = e => this.setState({
[ e.target.name ]: e.target.value
})
handleSubmit = e => {
e.preventDefault()
const { email, name, password } = this.state
axios.post('/', { email, name, password })
.then(({ data }) => this.setState({
...CLEAR_STATE,
message: `You sent: ${data.email}, ${data.name}, ${data.password}.`
}))
.catch(({ message }) => this.setState({ message }))
}
render () {
return (
<>
<form onSubmit={this.handleSubmit}>
<input
type='text'
name='email'
value={this.state.email}
onChange={this.handleChange} />
<input
type='text'
name='name'
value={this.state.name}
onChange={this.handleChange} />
<input
type='password'
name='password'
value={this.state.password}
onChange={this.handleChange} />
<input type='submit' value='Register' />
</form>
{this.state.message && <p>{this.state.message}</p>}
</>
)
}
}
Server:
app.use(express.json())
app.post('/', (req, res) => {
const { name, email, password } = req.body
res.status(201).json({ name, email, password })
})
Ok, changed everything but now i get status code 500 -Cannot read property 'register_name' of undefined ( i changed all the names to register_name ecc)
– Abel Hristodor
Nov 22 at 18:05
handleSubmit(event) { event.preventDefault(); const { register_name, register_email, register_password } = this.state axios.post('/api/auth/addUser', { name: register_name, email: register_email, password: register_password }) .then(res => res.json()) .catch(err => console.log(err)) console.log(this.state) this.clearInputs(); }
This is the handler
– Abel Hristodor
Nov 22 at 18:06
You appear to have skipped addingapp.use(express.json())
in your server-side code. This is why yourreq.body
is undefined.
– Rich Churcher
Nov 22 at 19:02
1
Oh haha thanks :)
– Abel Hristodor
Nov 22 at 19:26
add a comment |
There's a series of potential problems here. First, there's no particular need to make a urlencoded form submission here: just use JSON. Your submit could then look something like:
handleSubmit (e) {
e.preventDefault()
const { email, name, password } = this.state
axios.post('/api/auth/adduser', {
email,
name,
password
})
.then(res => /* ... */)
.catch(err => /* ... */)
}
On the server, you're probably after res.json
rather than res.send
.
const { email, name, password } = req.body
// ...
res.status(201).json({
email,
name
})
Also note that you don't need bodyParser
these days (you can just use express.json()
).
Finally, you should use event.target.name
in your handleChange
as the names match the names of your values in component state:
handleChange (e) {
this.setState({ [e.target.name]: event.target.value })
}
Simple example
Client:
const CLEAR_STATE = {
email: '',
name: '',
password: '',
message: ''
}
export default class App extends Component {
state = CLEAR_STATE
handleChange = e => this.setState({
[ e.target.name ]: e.target.value
})
handleSubmit = e => {
e.preventDefault()
const { email, name, password } = this.state
axios.post('/', { email, name, password })
.then(({ data }) => this.setState({
...CLEAR_STATE,
message: `You sent: ${data.email}, ${data.name}, ${data.password}.`
}))
.catch(({ message }) => this.setState({ message }))
}
render () {
return (
<>
<form onSubmit={this.handleSubmit}>
<input
type='text'
name='email'
value={this.state.email}
onChange={this.handleChange} />
<input
type='text'
name='name'
value={this.state.name}
onChange={this.handleChange} />
<input
type='password'
name='password'
value={this.state.password}
onChange={this.handleChange} />
<input type='submit' value='Register' />
</form>
{this.state.message && <p>{this.state.message}</p>}
</>
)
}
}
Server:
app.use(express.json())
app.post('/', (req, res) => {
const { name, email, password } = req.body
res.status(201).json({ name, email, password })
})
There's a series of potential problems here. First, there's no particular need to make a urlencoded form submission here: just use JSON. Your submit could then look something like:
handleSubmit (e) {
e.preventDefault()
const { email, name, password } = this.state
axios.post('/api/auth/adduser', {
email,
name,
password
})
.then(res => /* ... */)
.catch(err => /* ... */)
}
On the server, you're probably after res.json
rather than res.send
.
const { email, name, password } = req.body
// ...
res.status(201).json({
email,
name
})
Also note that you don't need bodyParser
these days (you can just use express.json()
).
Finally, you should use event.target.name
in your handleChange
as the names match the names of your values in component state:
handleChange (e) {
this.setState({ [e.target.name]: event.target.value })
}
Simple example
Client:
const CLEAR_STATE = {
email: '',
name: '',
password: '',
message: ''
}
export default class App extends Component {
state = CLEAR_STATE
handleChange = e => this.setState({
[ e.target.name ]: e.target.value
})
handleSubmit = e => {
e.preventDefault()
const { email, name, password } = this.state
axios.post('/', { email, name, password })
.then(({ data }) => this.setState({
...CLEAR_STATE,
message: `You sent: ${data.email}, ${data.name}, ${data.password}.`
}))
.catch(({ message }) => this.setState({ message }))
}
render () {
return (
<>
<form onSubmit={this.handleSubmit}>
<input
type='text'
name='email'
value={this.state.email}
onChange={this.handleChange} />
<input
type='text'
name='name'
value={this.state.name}
onChange={this.handleChange} />
<input
type='password'
name='password'
value={this.state.password}
onChange={this.handleChange} />
<input type='submit' value='Register' />
</form>
{this.state.message && <p>{this.state.message}</p>}
</>
)
}
}
Server:
app.use(express.json())
app.post('/', (req, res) => {
const { name, email, password } = req.body
res.status(201).json({ name, email, password })
})
edited Nov 22 at 20:01
answered Nov 22 at 17:48
Rich Churcher
2,53522343
2,53522343
Ok, changed everything but now i get status code 500 -Cannot read property 'register_name' of undefined ( i changed all the names to register_name ecc)
– Abel Hristodor
Nov 22 at 18:05
handleSubmit(event) { event.preventDefault(); const { register_name, register_email, register_password } = this.state axios.post('/api/auth/addUser', { name: register_name, email: register_email, password: register_password }) .then(res => res.json()) .catch(err => console.log(err)) console.log(this.state) this.clearInputs(); }
This is the handler
– Abel Hristodor
Nov 22 at 18:06
You appear to have skipped addingapp.use(express.json())
in your server-side code. This is why yourreq.body
is undefined.
– Rich Churcher
Nov 22 at 19:02
1
Oh haha thanks :)
– Abel Hristodor
Nov 22 at 19:26
add a comment |
Ok, changed everything but now i get status code 500 -Cannot read property 'register_name' of undefined ( i changed all the names to register_name ecc)
– Abel Hristodor
Nov 22 at 18:05
handleSubmit(event) { event.preventDefault(); const { register_name, register_email, register_password } = this.state axios.post('/api/auth/addUser', { name: register_name, email: register_email, password: register_password }) .then(res => res.json()) .catch(err => console.log(err)) console.log(this.state) this.clearInputs(); }
This is the handler
– Abel Hristodor
Nov 22 at 18:06
You appear to have skipped addingapp.use(express.json())
in your server-side code. This is why yourreq.body
is undefined.
– Rich Churcher
Nov 22 at 19:02
1
Oh haha thanks :)
– Abel Hristodor
Nov 22 at 19:26
Ok, changed everything but now i get status code 500 -Cannot read property 'register_name' of undefined ( i changed all the names to register_name ecc)
– Abel Hristodor
Nov 22 at 18:05
Ok, changed everything but now i get status code 500 -Cannot read property 'register_name' of undefined ( i changed all the names to register_name ecc)
– Abel Hristodor
Nov 22 at 18:05
handleSubmit(event) { event.preventDefault(); const { register_name, register_email, register_password } = this.state axios.post('/api/auth/addUser', { name: register_name, email: register_email, password: register_password }) .then(res => res.json()) .catch(err => console.log(err)) console.log(this.state) this.clearInputs(); }
This is the handler– Abel Hristodor
Nov 22 at 18:06
handleSubmit(event) { event.preventDefault(); const { register_name, register_email, register_password } = this.state axios.post('/api/auth/addUser', { name: register_name, email: register_email, password: register_password }) .then(res => res.json()) .catch(err => console.log(err)) console.log(this.state) this.clearInputs(); }
This is the handler– Abel Hristodor
Nov 22 at 18:06
You appear to have skipped adding
app.use(express.json())
in your server-side code. This is why your req.body
is undefined.– Rich Churcher
Nov 22 at 19:02
You appear to have skipped adding
app.use(express.json())
in your server-side code. This is why your req.body
is undefined.– Rich Churcher
Nov 22 at 19:02
1
1
Oh haha thanks :)
– Abel Hristodor
Nov 22 at 19:26
Oh haha thanks :)
– Abel Hristodor
Nov 22 at 19:26
add a comment |
You are using the [event.target.id]
of the changed input
element to update the state.
You state
expects name
,email
,password
but receives register_name
,register_email
,register_password
.
You should change the id
of the input
elements to match those in the state or you should use the name
attribute since that is what matches .
this.setState({[event.target.name]: event.target.value});
Keep in mind that the attribute htmlFor
of the label
elements also needs to match the id
and not the name
of the element it is linked to.
Also, you should have noticed that something was wrong since your code will not update the input
elements while you type.
oh yeah, forgot i changed them haha. Anyway, changed everything, same result
– Abel Hristodor
Nov 22 at 17:49
@AbelHristodor again you name the post parametersname
,email
,password
in theaxios
call, but in your server route you are usingreq.body.register_name
to access them.
– Gabriele Petrioli
Nov 22 at 18:54
okk, but now i get ` Cannot read property 'name' of undefined```
– Abel Hristodor
Nov 22 at 18:59
@AbelHristodor you needapp.use(express.json());
in your server side script.
– Gabriele Petrioli
Nov 22 at 19:08
Okk thanks :) I've been trying to solve this problem for a few days and it got very frustrating haha
– Abel Hristodor
Nov 22 at 19:25
add a comment |
You are using the [event.target.id]
of the changed input
element to update the state.
You state
expects name
,email
,password
but receives register_name
,register_email
,register_password
.
You should change the id
of the input
elements to match those in the state or you should use the name
attribute since that is what matches .
this.setState({[event.target.name]: event.target.value});
Keep in mind that the attribute htmlFor
of the label
elements also needs to match the id
and not the name
of the element it is linked to.
Also, you should have noticed that something was wrong since your code will not update the input
elements while you type.
oh yeah, forgot i changed them haha. Anyway, changed everything, same result
– Abel Hristodor
Nov 22 at 17:49
@AbelHristodor again you name the post parametersname
,email
,password
in theaxios
call, but in your server route you are usingreq.body.register_name
to access them.
– Gabriele Petrioli
Nov 22 at 18:54
okk, but now i get ` Cannot read property 'name' of undefined```
– Abel Hristodor
Nov 22 at 18:59
@AbelHristodor you needapp.use(express.json());
in your server side script.
– Gabriele Petrioli
Nov 22 at 19:08
Okk thanks :) I've been trying to solve this problem for a few days and it got very frustrating haha
– Abel Hristodor
Nov 22 at 19:25
add a comment |
You are using the [event.target.id]
of the changed input
element to update the state.
You state
expects name
,email
,password
but receives register_name
,register_email
,register_password
.
You should change the id
of the input
elements to match those in the state or you should use the name
attribute since that is what matches .
this.setState({[event.target.name]: event.target.value});
Keep in mind that the attribute htmlFor
of the label
elements also needs to match the id
and not the name
of the element it is linked to.
Also, you should have noticed that something was wrong since your code will not update the input
elements while you type.
You are using the [event.target.id]
of the changed input
element to update the state.
You state
expects name
,email
,password
but receives register_name
,register_email
,register_password
.
You should change the id
of the input
elements to match those in the state or you should use the name
attribute since that is what matches .
this.setState({[event.target.name]: event.target.value});
Keep in mind that the attribute htmlFor
of the label
elements also needs to match the id
and not the name
of the element it is linked to.
Also, you should have noticed that something was wrong since your code will not update the input
elements while you type.
answered Nov 22 at 17:40
Gabriele Petrioli
149k22197253
149k22197253
oh yeah, forgot i changed them haha. Anyway, changed everything, same result
– Abel Hristodor
Nov 22 at 17:49
@AbelHristodor again you name the post parametersname
,email
,password
in theaxios
call, but in your server route you are usingreq.body.register_name
to access them.
– Gabriele Petrioli
Nov 22 at 18:54
okk, but now i get ` Cannot read property 'name' of undefined```
– Abel Hristodor
Nov 22 at 18:59
@AbelHristodor you needapp.use(express.json());
in your server side script.
– Gabriele Petrioli
Nov 22 at 19:08
Okk thanks :) I've been trying to solve this problem for a few days and it got very frustrating haha
– Abel Hristodor
Nov 22 at 19:25
add a comment |
oh yeah, forgot i changed them haha. Anyway, changed everything, same result
– Abel Hristodor
Nov 22 at 17:49
@AbelHristodor again you name the post parametersname
,email
,password
in theaxios
call, but in your server route you are usingreq.body.register_name
to access them.
– Gabriele Petrioli
Nov 22 at 18:54
okk, but now i get ` Cannot read property 'name' of undefined```
– Abel Hristodor
Nov 22 at 18:59
@AbelHristodor you needapp.use(express.json());
in your server side script.
– Gabriele Petrioli
Nov 22 at 19:08
Okk thanks :) I've been trying to solve this problem for a few days and it got very frustrating haha
– Abel Hristodor
Nov 22 at 19:25
oh yeah, forgot i changed them haha. Anyway, changed everything, same result
– Abel Hristodor
Nov 22 at 17:49
oh yeah, forgot i changed them haha. Anyway, changed everything, same result
– Abel Hristodor
Nov 22 at 17:49
@AbelHristodor again you name the post parameters
name
, email
,password
in the axios
call, but in your server route you are using req.body.register_name
to access them.– Gabriele Petrioli
Nov 22 at 18:54
@AbelHristodor again you name the post parameters
name
, email
,password
in the axios
call, but in your server route you are using req.body.register_name
to access them.– Gabriele Petrioli
Nov 22 at 18:54
okk, but now i get ` Cannot read property 'name' of undefined```
– Abel Hristodor
Nov 22 at 18:59
okk, but now i get ` Cannot read property 'name' of undefined```
– Abel Hristodor
Nov 22 at 18:59
@AbelHristodor you need
app.use(express.json());
in your server side script.– Gabriele Petrioli
Nov 22 at 19:08
@AbelHristodor you need
app.use(express.json());
in your server side script.– Gabriele Petrioli
Nov 22 at 19:08
Okk thanks :) I've been trying to solve this problem for a few days and it got very frustrating haha
– Abel Hristodor
Nov 22 at 19:25
Okk thanks :) I've been trying to solve this problem for a few days and it got very frustrating haha
– Abel Hristodor
Nov 22 at 19:25
add a comment |
Everything works out of the box with just bare fetch
.
Here is gist, just make sure you attached bodyParser to express instance
const bodyParser = require('body-parser');
...
app.use(bodyParser.json());
axios lib is useful if you want to upload physical files with FormData
add a comment |
Everything works out of the box with just bare fetch
.
Here is gist, just make sure you attached bodyParser to express instance
const bodyParser = require('body-parser');
...
app.use(bodyParser.json());
axios lib is useful if you want to upload physical files with FormData
add a comment |
Everything works out of the box with just bare fetch
.
Here is gist, just make sure you attached bodyParser to express instance
const bodyParser = require('body-parser');
...
app.use(bodyParser.json());
axios lib is useful if you want to upload physical files with FormData
Everything works out of the box with just bare fetch
.
Here is gist, just make sure you attached bodyParser to express instance
const bodyParser = require('body-parser');
...
app.use(bodyParser.json());
axios lib is useful if you want to upload physical files with FormData
answered Nov 22 at 20:05
bFunc
659712
659712
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53435712%2fcant-post-data-to-express-using-react%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
any console entries? maybe a CORS issue?
– luschn
Nov 22 at 17:22
You are taking the info to submit from the state of the component
name: this.state.name
etc, are you sure it is correctly populated ? Show the code of that component.– Gabriele Petrioli
Nov 22 at 17:22
Just added the code of the component
– Abel Hristodor
Nov 22 at 17:34