I am experiencing issues with the TypeError: this.setstate is not a function. I am Using react to create an app that has a sign in and a register page, both pages have email, name and password input fields the error happens immediately on input of the values in the fields. below is the sample of my code from signin page, how can I get through this issue I have tried all my best and it seems I cant figure it out what is wrong in my code since is compiled successfully without any other errors expect on the inputs. I am also not so good at coding I am currently learning.
`import React from 'react';
class Signin extends React.Component {
constructor(props) {
super(props);
this.state = {
signInEmali: '',
signInPassword: '',
};
}
onEmaliChange = (Event) => {
this.setstate({ signInEmali: Event.target.value });//the error happens here
};
onPasswordChange = (Event) => {
this.setstate({ signInPassword: Event.target.value });//the error happens here
};
onSubmitSignIn = () => {
fetch('http://localhost:3001/signin', {
method: 'post',
headers: { 'content-type': 'application/json' },
body: JSON.stringify({
email: this.state.signInEmali,
password: this.state.signInPassword,
}),
})
.then((Response) => Response.json())
.then((data) => {
if (data === 'success') {
this.props.onRouteChange('home');
}
});
};
render() {
const { onRouteChange } = this.props;
return (
<article className="br3 b--black-10 mv4 w-100 w-50-m w-25-l mw6 shadow-5 center">
<main className="pa4 black-80">
<div className="measure">
<fieldset id="sign_up" className="ba b--transparent ph0 mh0">
<legend className="f1 fw6 ph0 mh0">Sign 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-address"
id="email-address"
onChange={this.onEmaliChange}
/>
</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"
onChange={this.onPasswordChange}
/>
</div>
</fieldset>
<div className="">
<input
onClick={this.onSubmitSignIn}
className="b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib"
type="submit"
value="Sign in"
/>
</div>
<div className="lh-copy mt3">
<p
onClick={() => onRouteChange('register')}
className="f6 link dim black db pointer">
Register
</p>
</div>
</div>
</main>
</article>
);
}
}
export default Signin;
`
Just change setstate
to setState
in your code and it'll work fine
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.