¿Alguien podría completar la sintaxis de una función en un componente de clase de reacción que quiero para presionar el evento onClick y si las credenciales son verdaderas ingresará de lo contrario dará un error? Voy a publicar mi pensamiento primero:

Función con const user={username: 'gerasimos', password: '27111980'} y luego if(this.state.username & this.state.password ===user.password) { this.props.onRouteChange('home ')

Tengo la idea en mi cabeza pero no estoy seguro acerca de la sintaxis completa.

Mi código es este:

 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!