I'm working with ReactJS and following a Tutorial to create a Login Page, in the example the code is very intuitive and generic, I'm trying to emulate the function to get the values from the email and password Inputs, but when I write the text is immediately replace with an empty String.
I already went through similar posts and found that the logic is more plex without be needing that. I would like to have something as simple as this DEMO.
I tried adding ids to different ponents to validate if it worked, I couldn't make it work.
This is the code:
class LoginLayout extends Component {
constructor(props) {
super(props);
this.state = {
email: "",
password: ""
};
}
onUserLogin() {
if (this.state.email !== "" && this.state.password !== "") {
this.props.loginUser(this.state, this.props.history);
}
}
handleChange = event => {
this.setState({
[event.target.id]: event.target.value
});
}
render() {
return (
<Fragment>
<Form>
<Label className="form-group has-float-label mb-4" id="inputEmail">
<Input type="email"
value={this.state.email}
onChange={this.handleChange}
/>
</Label>
<Label className="form-group has-float-label mb-4">
<Input type="password" id="inputPassword"
value={this.state.password}
onChange={this.handleChange}
/>
</Label>
<div className="d-flex justify-content-between align-items-center">
<NavLink to={`/forgot-password`}>
<IntlMessages id="user.forgot-password-question" />
</NavLink>
<Button
color="primary"
className="btn-shadow"
size="lg"
onClick={() => this.onUserLogin()}
>
<IntlMessages id="user.login-button" />
</Button>
</div>
</Form>
</Fragment>
);
}
}
const mapStateToProps = ({ authUser }) => {
const { user, loading } = authUser;
return { user, loading };
};
export default connect(
mapStateToProps,
{
loginUser
}
)(LoginLayout);
I'm working with ReactJS and following a Tutorial to create a Login Page, in the example the code is very intuitive and generic, I'm trying to emulate the function to get the values from the email and password Inputs, but when I write the text is immediately replace with an empty String.
I already went through similar posts and found that the logic is more plex without be needing that. I would like to have something as simple as this DEMO.
I tried adding ids to different ponents to validate if it worked, I couldn't make it work.
This is the code:
class LoginLayout extends Component {
constructor(props) {
super(props);
this.state = {
email: "",
password: ""
};
}
onUserLogin() {
if (this.state.email !== "" && this.state.password !== "") {
this.props.loginUser(this.state, this.props.history);
}
}
handleChange = event => {
this.setState({
[event.target.id]: event.target.value
});
}
render() {
return (
<Fragment>
<Form>
<Label className="form-group has-float-label mb-4" id="inputEmail">
<Input type="email"
value={this.state.email}
onChange={this.handleChange}
/>
</Label>
<Label className="form-group has-float-label mb-4">
<Input type="password" id="inputPassword"
value={this.state.password}
onChange={this.handleChange}
/>
</Label>
<div className="d-flex justify-content-between align-items-center">
<NavLink to={`/forgot-password`}>
<IntlMessages id="user.forgot-password-question" />
</NavLink>
<Button
color="primary"
className="btn-shadow"
size="lg"
onClick={() => this.onUserLogin()}
>
<IntlMessages id="user.login-button" />
</Button>
</div>
</Form>
</Fragment>
);
}
}
const mapStateToProps = ({ authUser }) => {
const { user, loading } = authUser;
return { user, loading };
};
export default connect(
mapStateToProps,
{
loginUser
}
)(LoginLayout);
- In terms of your change handler, what do you think event.target.id is resolving to? How does that pare to the value you are pointing that input to and the state property names on this ponent? I see the issue being the id being inputPassword but the value is point to just password. Try changing the id of that input to just password and actually adding an id of the email input to email to match your initial state. – Alexander Staroselsky Commented Apr 12, 2019 at 0:00
- Thanks, I'm new to react and bought a template to only modify it. And I really like things make simple as the demo I was trying to replicate. You saved my life. – Rednaxel Commented Apr 12, 2019 at 0:13
2 Answers
Reset to default 3Add an id property of value “email” to your email input and change id value “inputPassword” to just “password”.
This is so that [event.target.id] dynamic property key resolves values in your change handler matches the property names of “email” and “password” of your ponents state structure.
Otherwise currently, you are setting state of inputPassword instead of password, but pointing the inputs controlled value property to password which isn’t being updated because of the mismatch. Also, email doesn’t have a visible id property so that would evaluate as undefined in terms of event.target.id.
Hopefully that helps!
to fix this issue just make handleChange Like this:
import React, { useState } from 'react;
const Input = ()=>{
const [user,setUser] = useState({ email:'',password:'' });
const {email,password} = user;
const handleChange = (e)=>{
const {name,value} = e.target;
setUser({[name]:value});
}
console.log(user).
return(
<>
<input onChange = {handleChange} name = "email" value = {email} />
<input onChange = {handleChange} name = "password" value = {password} />
</>
)
}
export default Input;it will work for all your inputs.