I want to make register and signin form, everything is okay, i can do register. But my signin part is seem not working.
Error during signin: ReferenceError: user is not defined
It is on Signin.js line 40, here:
return response.json(user[0]);
And this is the full code of Signin.js :
import React from "react";
class Signin extends React.Component {
constructor(props) {
super(props);
this.state = {
signInEmail: "",
signInPassword: "",
};
}
onEmailChange = (event) => {
this.setState({ signInEmail: event.target.value });
};
onPasswordChange = (event) => {
this.setState({ signInPassword: event.target.value });
};
onSubmitSignIn = () => {
const { signInEmail, signInPassword } = this.state;
fetch("http://localhost:3000/signin", {
method: "post",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
email: signInEmail,
password: signInPassword,
}),
})
.then((response) => {
console.log("Response from server:", response);
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
const contentType = response.headers.get("content-type");
if (contentType && contentType.includes("application/json")) {
return response.json(user[0]);
} else {
throw new Error("Invalid or empty JSON response");
}
})
.then((response) => response.json())
.then((user) => {
if (user.id) {
this.props.loadUser(user);
this.props.onRouteChange("home");
}
})
.catch((error) => {
console.error("Error during signin:", error);
});
};
render() {
const { onRouteChange } = this.props;
return (
<article className="br3 ba 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.onEmailChange}
/>
</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;
i’ve already tried console log everything i need to, the response from server is look okay, this is what i get:
Response {type: 'cors', url: 'http://localhost:3000/signin', redirected: false, status: 200, ok: true, …}
I’ve expected for this signin part, when user input their data (that already registered on database), it bring them into the app.
2
Answers
user is not defined in this line, return response.json(user[0]); ,
change some code of lines in onSubmitSignIn method
You should return the entire response as JSON and handle the user data in the subsequent then block.