function Login() {
const [email, setEmail] = useState("");
const [password, setpassword] = useState("");
const [users, setUser] = useState([]);
function login() {
fetch(
"http://116.202.231.219:8069/Restaurant/Login_Updated?Cont4=" +
email +
"&Pswd=" +
password
).then((result) => {
result.json().then((resp) => {
// console.warn(resp)
setUser(resp);
console.log(resp);
});
});
}
return (
<div className="col-sm-6 offset-sm-3">
<h1>Login Page</h1>
<br />
<input
type="text"
className="form-control"
onChange={(e) => setEmail(e.target.value)}
/>
<br />
<br />
<input
type="password"
className="form-control"
onChange={(e) => setpassword(e.target.value)}
/>
<br />
<br />
<button onClick={login} className="btn btn-primary">
Login
</button>
</div>
);
}
now I want to check that if the data being fetched is the same as the data being put in the inputs so I am trying using "IF" but the "RESP" variable is not global I mean that it is not working with "IF". So can you guys help me how to do a check that the Email pass is equal to the Email pass from the API.
As you can see that API is getting the cont4 and pass from the input tags and giving back the objects in return but I am not able to run the success check on this API that if it returns object go to dashboard else throw alert of error
import axios from 'axios';
//add axios in your project
function Login() {
const [email, setEmail] = useState("");
const [password, setpassword] = useState("");
const [users, setUser] = useState({});
loginHandel = () => {
const url = `http://116.202.231.219:8069/Restaurant/Login_Updated?Cont4=${email}&Pswd=${password}`
axios.get(url).then((res) => {
//check the res if its getting the correct data or not?
//restructure accordingly
console.log(res);
const persons = res;
if ((persons?.email === email) && (persons?.password === password)) {
//perform any thing here
setUser(persons);
} else {
console.log("User email and passwoed mismatched!")
}
}).catch(err => {
//handel your error
console.log(err);
})
}
return (
<div className="col-sm-6 offset-sm-3">
<h1>Login Page</h1>
<br />
<form>
</form>
<input
type="text"
className="form-control"
onChange={(e) => setEmail(e.target.value)}
/>
<br />
<br />
<input
type="password"
className="form-control"
onChange={(e) => setpassword(e.target.value)}
/>
<br />
<br />
<button onClick={loginHandel} className="btn btn-primary">
Login
</button>
</div>
);
}