Mixing
React pass state values to var not working
I have been returning to react after some break and try to copy me state to :
var {email, password } = this.state;
From some reason i got the error :
ReferenceError: password is not defined at eval (eval at...
Can't really figure it out way I have such error on a simple stuff.
Working on version :
"react": "^16.7.0",
And me code is :
import React, { Component } from 'react';
import { connect } from "react-redux";
import { HashRouter, Route } from 'react-router-dom';
import { login } from '../actions/loginActions';
class Login extends Component {
constructor (props) {
super(props)
this.state = {
email: "",
password: "",
token: "",
redirect: false
};
this.onLogin = this.onLogin.bind(this)
this.onLogout = this.onLogout.bind(this)
}
handleUpdateEmail = (e) =>{
console.log('handleUpdateEmail: '+e.target.value)
this.setState({email: e.target.value});
}
handleUpdatePassword = (e) =>{
console.log('handleUpdatePassword: '+e.target.value)
this.setState({password: e.target.value});
}
componentWillMount() {
this.state = { token: localStorage.getItem('token') }
}
onLogin = () => {
var { email, password } = this.state;
let data = {
'email': email,
'password': password
}
this.props.dispatch(login(data));
}
onLogout = state =>{
localStorage.removeItem('token');
}
render() {
const { redirect } = this.state;
if (redirect) {
return (
<HashRouter>
<Route path='/' component={() => window.location = '/'}/>
</HashRouter>
);
}
return (
<div className="app flex-row align-items-center">
<form onSubmit={this.onLogin} >
<label>
Username:
<input type="text" placeholder="Username" onChange={this.handleUpdateEmail}/>
</label>
<label>
Password:
<input type="password" placeholder="Password" onChange={this.handleUpdatePassword} />
</label>
<input type="submit" value="Submit" />
</form>
</div>
);
}
}
const mapStateToProps = state => ({
logs: state
});
export default connect(mapStateToProps)(Login);
How should I approach this kind of error?
And probably how to solve this issue?
--EDIT--
After me friends below help me I understand that the issue is that the function
this.props.dispatch(login(data));
call before data get the state values .
how can i force it to wait until the data is set?
reactjs redux state
asked Jan 1 at 22:47
shaharnakashshaharnakash
3432625
|
show 3 more comments
I have been returning to react after some break and try to copy me state to :
var {email, password } = this.state;
From some reason i got the error :
ReferenceError: password is not defined at eval (eval at...
Can't really figure it out way I have such error on a simple stuff.
Working on version :
"react": "^16.7.0",
And me code is :
import React, { Component } from 'react';
import { connect } from "react-redux";
import { HashRouter, Route } from 'react-router-dom';
import { login } from '../actions/loginActions';
class Login extends Component {
constructor (props) {
super(props)
this.state = {
email: "",
password: "",
token: "",
redirect: false
};
this.onLogin = this.onLogin.bind(this)
this.onLogout = this.onLogout.bind(this)
}
handleUpdateEmail = (e) =>{
console.log('handleUpdateEmail: '+e.target.value)
this.setState({email: e.target.value});
}
handleUpdatePassword = (e) =>{
console.log('handleUpdatePassword: '+e.target.value)
this.setState({password: e.target.value});
}
componentWillMount() {
this.state = { token: localStorage.getItem('token') }
}
onLogin = () => {
var { email, password } = this.state;
let data = {
'email': email,
'password': password
}
this.props.dispatch(login(data));
}
onLogout = state =>{
localStorage.removeItem('token');
}
render() {
const { redirect } = this.state;
if (redirect) {
return (
<HashRouter>
<Route path='/' component={() => window.location = '/'}/>
</HashRouter>
);
}
return (
<div className="app flex-row align-items-center">
<form onSubmit={this.onLogin} >
<label>
Username:
<input type="text" placeholder="Username" onChange={this.handleUpdateEmail}/>
</label>
<label>
Password:
<input type="password" placeholder="Password" onChange={this.handleUpdatePassword} />
</label>
<input type="submit" value="Submit" />
</form>
</div>
);
}
}
const mapStateToProps = state => ({
logs: state
});
export default connect(mapStateToProps)(Login);
How should I approach this kind of error?
And probably how to solve this issue?
--EDIT--
After me friends below help me I understand that the issue is that the function
this.props.dispatch(login(data));
call before data get the state values .
how can i force it to wait until the data is set?
reactjs redux state
asked Jan 1 at 22:47
shaharnakashshaharnakash
3432625
where is the instructionvar {email, password } = this.state;in your code ?
– Olivier Boissé
Jan 1 at 23:01
in function onLogin
– shaharnakash
Jan 1 at 23:03
your code seems to be correct. Are you sure the error comes from theonLoginfunction ? you havevar { email, password } = this.props;instead ofvar { email, password } = this.state;
– Olivier Boissé
Jan 1 at 23:07
I know so how come I can't pass the value:(
– shaharnakash
Jan 1 at 23:09
1
Could you show us the login action method ?
– Kevin Coulibaly
Jan 1 at 23:51
|
show 3 more comments
I have been returning to react after some break and try to copy me state to :
var {email, password } = this.state;
From some reason i got the error :
ReferenceError: password is not defined at eval (eval at...
Can't really figure it out way I have such error on a simple stuff.
Working on version :
"react": "^16.7.0",
And me code is :
import React, { Component } from 'react';
import { connect } from "react-redux";
import { HashRouter, Route } from 'react-router-dom';
import { login } from '../actions/loginActions';
class Login extends Component {
constructor (props) {
super(props)
this.state = {
email: "",
password: "",
token: "",
redirect: false
};
this.onLogin = this.onLogin.bind(this)
this.onLogout = this.onLogout.bind(this)
}
handleUpdateEmail = (e) =>{
console.log('handleUpdateEmail: '+e.target.value)
this.setState({email: e.target.value});
}
handleUpdatePassword = (e) =>{
console.log('handleUpdatePassword: '+e.target.value)
this.setState({password: e.target.value});
}
componentWillMount() {
this.state = { token: localStorage.getItem('token') }
}
onLogin = () => {
var { email, password } = this.state;
let data = {
'email': email,
'password': password
}
this.props.dispatch(login(data));
}
onLogout = state =>{
localStorage.removeItem('token');
}
render() {
const { redirect } = this.state;
if (redirect) {
return (
<HashRouter>
<Route path='/' component={() => window.location = '/'}/>
</HashRouter>
);
}
return (
<div className="app flex-row align-items-center">
<form onSubmit={this.onLogin} >
<label>
Username:
<input type="text" placeholder="Username" onChange={this.handleUpdateEmail}/>
</label>
<label>
Password:
<input type="password" placeholder="Password" onChange={this.handleUpdatePassword} />
</label>
<input type="submit" value="Submit" />
</form>
</div>
);
}
}
const mapStateToProps = state => ({
logs: state
});
export default connect(mapStateToProps)(Login);
How should I approach this kind of error?
And probably how to solve this issue?
--EDIT--
After me friends below help me I understand that the issue is that the function
this.props.dispatch(login(data));
call before data get the state values .
how can i force it to wait until the data is set?
reactjs redux state
asked Jan 1 at 22:47
shaharnakashshaharnakash
3432625
I have been returning to react after some break and try to copy me state to :
var {email, password } = this.state;
From some reason i got the error :
ReferenceError: password is not defined at eval (eval at...
Can't really figure it out way I have such error on a simple stuff.
Working on version :
"react": "^16.7.0",
And me code is :
import React, { Component } from 'react';
import { connect } from "react-redux";
import { HashRouter, Route } from 'react-router-dom';
import { login } from '../actions/loginActions';
class Login extends Component {
constructor (props) {
super(props)
this.state = {
email: "",
password: "",
token: "",
redirect: false
};
this.onLogin = this.onLogin.bind(this)
this.onLogout = this.onLogout.bind(this)
}
handleUpdateEmail = (e) =>{
console.log('handleUpdateEmail: '+e.target.value)
this.setState({email: e.target.value});
}
handleUpdatePassword = (e) =>{
console.log('handleUpdatePassword: '+e.target.value)
this.setState({password: e.target.value});
}
componentWillMount() {
this.state = { token: localStorage.getItem('token') }
}
onLogin = () => {
var { email, password } = this.state;
let data = {
'email': email,
'password': password
}
this.props.dispatch(login(data));
}
onLogout = state =>{
localStorage.removeItem('token');
}
render() {
const { redirect } = this.state;
if (redirect) {
return (
<HashRouter>
<Route path='/' component={() => window.location = '/'}/>
</HashRouter>
);
}
return (
<div className="app flex-row align-items-center">
<form onSubmit={this.onLogin} >
<label>
Username:
<input type="text" placeholder="Username" onChange={this.handleUpdateEmail}/>
</label>
<label>
Password:
<input type="password" placeholder="Password" onChange={this.handleUpdatePassword} />
</label>
<input type="submit" value="Submit" />
</form>
</div>
);
}
}
const mapStateToProps = state => ({
logs: state
});
export default connect(mapStateToProps)(Login);
How should I approach this kind of error?
And probably how to solve this issue?
--EDIT--
After me friends below help me I understand that the issue is that the function
this.props.dispatch(login(data));
call before data get the state values .
how can i force it to wait until the data is set?
reactjs redux state
reactjs redux state
asked Jan 1 at 22:47
shaharnakashshaharnakash
3432625
asked Jan 1 at 22:47
shaharnakashshaharnakash
3432625
edited Jan 1 at 23:36
shaharnakash
asked Jan 1 at 22:47
shaharnakashshaharnakash
3432625
asked Jan 1 at 22:47
shaharnakashshaharnakash
3432625
asked Jan 1 at 22:47
shaharnakashshaharnakash
3432625
3432625
where is the instructionvar {email, password } = this.state;in your code ?
– Olivier Boissé
Jan 1 at 23:01
in function onLogin
– shaharnakash
Jan 1 at 23:03
your code seems to be correct. Are you sure the error comes from theonLoginfunction ? you havevar { email, password } = this.props;instead ofvar { email, password } = this.state;
– Olivier Boissé
Jan 1 at 23:07
I know so how come I can't pass the value:(
– shaharnakash
Jan 1 at 23:09
1
Could you show us the login action method ?
– Kevin Coulibaly
Jan 1 at 23:51
|
show 3 more comments
where is the instructionvar {email, password } = this.state;in your code ?
– Olivier Boissé
Jan 1 at 23:01
in function onLogin
– shaharnakash
Jan 1 at 23:03
your code seems to be correct. Are you sure the error comes from theonLoginfunction ? you havevar { email, password } = this.props;instead ofvar { email, password } = this.state;
– Olivier Boissé
Jan 1 at 23:07
I know so how come I can't pass the value:(
– shaharnakash
Jan 1 at 23:09
1
Could you show us the login action method ?
– Kevin Coulibaly
Jan 1 at 23:51
where is the instruction
var {email, password } = this.state; in your code ?– Olivier Boissé
Jan 1 at 23:01
where is the instruction
var {email, password } = this.state; in your code ?– Olivier Boissé
Jan 1 at 23:01
in function onLogin
– shaharnakash
Jan 1 at 23:03
in function onLogin
– shaharnakash
Jan 1 at 23:03
your code seems to be correct. Are you sure the error comes from the
onLogin function ? you have var { email, password } = this.props; instead of var { email, password } = this.state;– Olivier Boissé
Jan 1 at 23:07
your code seems to be correct. Are you sure the error comes from the
onLogin function ? you have var { email, password } = this.props; instead of var { email, password } = this.state;– Olivier Boissé
Jan 1 at 23:07
I know so how come I can't pass the value:(
– shaharnakash
Jan 1 at 23:09
I know so how come I can't pass the value:(
– shaharnakash
Jan 1 at 23:09
1
1
Could you show us the login action method ?
– Kevin Coulibaly
Jan 1 at 23:51
Could you show us the login action method ?
– Kevin Coulibaly
Jan 1 at 23:51
|
show 3 more comments
3 Answers
3
active
oldest
votes
Instead of using componentWillMount which is now deprecated, you should initialize the whole state inside your constructor, you should not reassign the state after that, for future update you should use this.setState
constructor (props) {
super(props)
this.state = {
email: "",
password: "",
redirect: false,
token: localStorage.getItem('token')
};
this.onLogin = this.onLogin.bind(this)
this.onLogout = this.onLogout.bind(this)
}
edited Jan 1 at 23:20
Ryan Cogswell
5,1761624
answered Jan 1 at 23:16
Olivier BoisséOlivier Boissé
3,5401026
add a comment |
There are several things that could lead to an error in my opinion.
- ComponentDidMount should make use of ComponentInstance.setState method
componentWillMount() {
this.setState({ token: localStorage.getItem('token') })
}
The onLogin method is referencing to props instead of state
var { email, password } = this.props;
should be
var { email, password } = this.state;
The connection to redux seems confusing since it is passing the whole state as logs property to the component
answered Jan 1 at 23:16
Kevin CoulibalyKevin Coulibaly
1219
i have change it back to this.state , and after removing the this.props.dispatch(login(data)); i can console the data info
– shaharnakash
Jan 1 at 23:24
add a comment |
In the onLogin function you trying to get email and password from the props instead of the state.
answered Jan 1 at 23:14
C. TothC. Toth
1
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%2f53999548%2freact-pass-state-values-to-var-not-working%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
Instead of using componentWillMount which is now deprecated, you should initialize the whole state inside your constructor, you should not reassign the state after that, for future update you should use this.setState
constructor (props) {
super(props)
this.state = {
email: "",
password: "",
redirect: false,
token: localStorage.getItem('token')
};
this.onLogin = this.onLogin.bind(this)
this.onLogout = this.onLogout.bind(this)
}
edited Jan 1 at 23:20
Ryan Cogswell
5,1761624
answered Jan 1 at 23:16
Olivier BoisséOlivier Boissé
3,5401026
add a comment |
Instead of using componentWillMount which is now deprecated, you should initialize the whole state inside your constructor, you should not reassign the state after that, for future update you should use this.setState
constructor (props) {
super(props)
this.state = {
email: "",
password: "",
redirect: false,
token: localStorage.getItem('token')
};
this.onLogin = this.onLogin.bind(this)
this.onLogout = this.onLogout.bind(this)
}
edited Jan 1 at 23:20
Ryan Cogswell
5,1761624
answered Jan 1 at 23:16
Olivier BoisséOlivier Boissé
3,5401026
add a comment |
Instead of using componentWillMount which is now deprecated, you should initialize the whole state inside your constructor, you should not reassign the state after that, for future update you should use this.setState
constructor (props) {
super(props)
this.state = {
email: "",
password: "",
redirect: false,
token: localStorage.getItem('token')
};
this.onLogin = this.onLogin.bind(this)
this.onLogout = this.onLogout.bind(this)
}
edited Jan 1 at 23:20
Ryan Cogswell
5,1761624
answered Jan 1 at 23:16
Olivier BoisséOlivier Boissé
3,5401026
Instead of using componentWillMount which is now deprecated, you should initialize the whole state inside your constructor, you should not reassign the state after that, for future update you should use this.setState
constructor (props) {
super(props)
this.state = {
email: "",
password: "",
redirect: false,
token: localStorage.getItem('token')
};
this.onLogin = this.onLogin.bind(this)
this.onLogout = this.onLogout.bind(this)
}
edited Jan 1 at 23:20
Ryan Cogswell
5,1761624
answered Jan 1 at 23:16
Olivier BoisséOlivier Boissé
3,5401026
edited Jan 1 at 23:20
Ryan Cogswell
5,1761624
edited Jan 1 at 23:20
Ryan Cogswell
5,1761624
edited Jan 1 at 23:20
Ryan Cogswell
5,1761624
5,1761624
answered Jan 1 at 23:16
Olivier BoisséOlivier Boissé
3,5401026
answered Jan 1 at 23:16
Olivier BoisséOlivier Boissé
3,5401026
answered Jan 1 at 23:16
Olivier BoisséOlivier Boissé
3,5401026
3,5401026
add a comment |
add a comment |
There are several things that could lead to an error in my opinion.
- ComponentDidMount should make use of ComponentInstance.setState method
componentWillMount() {
this.setState({ token: localStorage.getItem('token') })
}
The onLogin method is referencing to props instead of state
var { email, password } = this.props;
should be
var { email, password } = this.state;
The connection to redux seems confusing since it is passing the whole state as logs property to the component
answered Jan 1 at 23:16
Kevin CoulibalyKevin Coulibaly
1219
i have change it back to this.state , and after removing the this.props.dispatch(login(data)); i can console the data info
– shaharnakash
Jan 1 at 23:24
add a comment |
There are several things that could lead to an error in my opinion.
- ComponentDidMount should make use of ComponentInstance.setState method
componentWillMount() {
this.setState({ token: localStorage.getItem('token') })
}
The onLogin method is referencing to props instead of state
var { email, password } = this.props;
should be
var { email, password } = this.state;
The connection to redux seems confusing since it is passing the whole state as logs property to the component
answered Jan 1 at 23:16
Kevin CoulibalyKevin Coulibaly
1219
i have change it back to this.state , and after removing the this.props.dispatch(login(data)); i can console the data info
– shaharnakash
Jan 1 at 23:24
add a comment |
There are several things that could lead to an error in my opinion.
- ComponentDidMount should make use of ComponentInstance.setState method
componentWillMount() {
this.setState({ token: localStorage.getItem('token') })
}
The onLogin method is referencing to props instead of state
var { email, password } = this.props;
should be
var { email, password } = this.state;
The connection to redux seems confusing since it is passing the whole state as logs property to the component
answered Jan 1 at 23:16
Kevin CoulibalyKevin Coulibaly
1219
There are several things that could lead to an error in my opinion.
- ComponentDidMount should make use of ComponentInstance.setState method
componentWillMount() {
this.setState({ token: localStorage.getItem('token') })
}
The onLogin method is referencing to props instead of state
var { email, password } = this.props;
should be
var { email, password } = this.state;
The connection to redux seems confusing since it is passing the whole state as logs property to the component
componentWillMount() {
this.setState({ token: localStorage.getItem('token') })
}componentWillMount() {
this.setState({ token: localStorage.getItem('token') })
}answered Jan 1 at 23:16
Kevin CoulibalyKevin Coulibaly
1219
answered Jan 1 at 23:16
Kevin CoulibalyKevin Coulibaly
1219
answered Jan 1 at 23:16
Kevin CoulibalyKevin Coulibaly
1219
answered Jan 1 at 23:16
Kevin CoulibalyKevin Coulibaly
1219
1219
i have change it back to this.state , and after removing the this.props.dispatch(login(data)); i can console the data info
– shaharnakash
Jan 1 at 23:24
add a comment |
i have change it back to this.state , and after removing the this.props.dispatch(login(data)); i can console the data info
– shaharnakash
Jan 1 at 23:24
i have change it back to this.state , and after removing the this.props.dispatch(login(data)); i can console the data info
– shaharnakash
Jan 1 at 23:24
i have change it back to this.state , and after removing the this.props.dispatch(login(data)); i can console the data info
– shaharnakash
Jan 1 at 23:24
add a comment |
In the onLogin function you trying to get email and password from the props instead of the state.
answered Jan 1 at 23:14
C. TothC. Toth
1
add a comment |
In the onLogin function you trying to get email and password from the props instead of the state.
answered Jan 1 at 23:14
C. TothC. Toth
1
add a comment |
In the onLogin function you trying to get email and password from the props instead of the state.
answered Jan 1 at 23:14
C. TothC. Toth
1
In the onLogin function you trying to get email and password from the props instead of the state.
answered Jan 1 at 23:14
C. TothC. Toth
1
answered Jan 1 at 23:14
C. TothC. Toth
1
answered Jan 1 at 23:14
C. TothC. Toth
1
answered Jan 1 at 23:14
C. TothC. Toth
1
1
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.
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%2f53999548%2freact-pass-state-values-to-var-not-working%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
where is the instruction
var {email, password } = this.state;in your code ?– Olivier Boissé
Jan 1 at 23:01
in function onLogin
– shaharnakash
Jan 1 at 23:03
your code seems to be correct. Are you sure the error comes from the
onLoginfunction ? you havevar { email, password } = this.props;instead ofvar { email, password } = this.state;– Olivier Boissé
Jan 1 at 23:07
I know so how come I can't pass the value:(
– shaharnakash
Jan 1 at 23:09
1
Could you show us the login action method ?
– Kevin Coulibaly
Jan 1 at 23:51