Could someone complete the syntax of a function in a react class component that I want in order to press the onClick event and if the credentials are true will enter otherwise will give an error! I will post my thinking first:
Function with a const user={username: 'gerasimos', password: '27111980'} and then if(this.state.username & this.state.password ===user.password) { this.props.onRouteChange('home')
I have the idea in my head but not sure about the complete syntax.
My code is this:
constructor (props) {
super(props);
this.state = {
email: '',
password: ''
}
}
handleUserInput = (e) => {
const name = e.target.name;
const value = e.target.value;
this.setState({[name]: value})}
render () {
return (
<article className="br2 ba dark-gray b--black-30 mv6 w-100 w-50-m w-25-l mw5 center">
<main className="pa4 black-80">
<div className="measure center">
<fieldset id="sign_up" className="ba b--transparent ph0 mh0">
<legend className="f4 fw6 ph0 mh0">Log In</legend>
<div className="mt3">
<label className="db fw6 lh-copy f6" htmlFor="email-address">Email</label>
<input className="pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
type="email"
name="email"
id="email-address"
placeholder="Email"
value={this.state.email}
onChange={this.handleUserInput}
/>
</div>
<div className="mv3">
<label className="db fw6 lh-copy f6" htmlFor="password">Password</label>
<input className="b pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
type="password"
name="password"
id="password"
placeholder="Password"
value={this.state.password}
onChange={this.handleUserInput}
/>
</div>
</fieldset>
<div className="">
<input onClick = {() => this.props.onRouteChange("home")}
className="b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib"
type="submit"
value="Log in"
/>
</div>
</div>
</main>
</article>
);
}
}```
Thank you in advance!
React documentation defines event handling beautifully. You should check this out.
In your code, you have email and password as input fields and not username and password.
<input
onClick={this.handleOnclick}
className="b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib"
type="submit"
value="Log in"
/>
This is how you can define the onClick handler.
handleOnclick = () => {
const user = { email: "gerasimos", password: "27111980" };
if (
this.state.email === user.email &&
this.state.password === user.password
) {
this.props.onRouteChange("home");
}
};