Why my state is not changing to false and true? - reactjs

Question

I want to set Iscandidate to true if user role === "candidate" and same for comapny if userrole === "company" and other should be false . I am saving isCandidate and isCompany as true and false in DB , if one is true the other should be false but I am not getting desired output.
What I am trying is :
console.log("signin card");
const [phoneNumber, setPhoneNumber] = useState("");
const [isCompany, setIsCompany] = useState(null);
const [isCandidate, setIsCandidate] = useState(null);
const body = {
phoneNumber,
isCandidate,
isCompany,
};
const onSubmitHandler = async () => {
if (userRole === "candidate") {
console.log(userRole);
setIsCandidate(true);
setIsCompany(false);
}
if (userRole === "company") {
console.log(userRole);
setIsCandidate(false);
setIsCompany(true);
}
console.log("body : ", body);
const res = await axios.post(
"http://localhost:8000/user-role/recorded",
body
);
const otpRes = await axios.get(
`https://2factor.in/API/V1/b3014f3e-2e06-11ea-9fa5-0200cd936042/SMS/+91${phoneNumber}/AUTOGEN3`
);
console.log("res = ", res);
console.log("otp = ", otpRes);
};
const onChangeHandler = (e) => {
setPhoneNumber(e.target.value);
};
return (
<>
<div
className="modal"
id="signInCard"
tabIndex="-1"
aria-hidden="true"
style={{
position: "fixed",
top: "0%",
left: "50%",
width: "100%",
height: "100%",
overflowX: "hidden",
overflowY: "auto",
transform: "translateX(-50%)",
zIndex: "1055",
}}
>
<div
className="modal-dialog modal-dialog-centered"
style={{ width: "20%" }}
>
<div className="modal-content">
<div className="modal-body p-5">
<div className="position-absolute end-0 top-0 p-3">
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div className="auth-content">
<div className="w-100">
<div className="text-center mb-4">
<h5>Sign In as {userRole}</h5>
<p className="text-muted"></p>
</div>
<form
onSubmit={(e) => {
onSubmitHandler();
}}
className="auth-form"
>
<div className="input-group mb-3">
{/* <label for="usernameInput" className="form-label">Phone No.</label> */}
<div className="input-group-prepend">
<span className="input-group-text" id="basic-addon1">
+91
</span>
</div>
<input
type="number"
name="phoneNumber"
className="form-control"
id="usernameInput"
placeholder="Enter your phone no."
aria-label="number"
aria-describedby="basic-addon1"
onChange={onChangeHandler}
value={phoneNumber}
/>
<span className="text-danger"></span>
</div>
<div className="text-center">
<a href="#otpModal" data-bs-toggle="modal">
<button
type="submit"
className="btn btn-primary w-100"
onClick={onSubmitHandler}
>
Sign In
</button>
</a>
{/* <a
href="#otpModal"
className="form-text user_sign"
data-bs-toggle="modal"
>
Candidate
</a> */}
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
Please help while saving into Db I am getting null

Answer 1

You're posting the data into db just after setting the state. You have to change that
let body = {
phoneNumber,
isCandidate,
isCompany,
};
const onSubmitHandler = async () => {
if (userRole === "candidate") {
console.log(userRole);
setIsCandidate(true);
setIsCompany(false);
body.isCandidate = true;
body.isCompany = false
}
if (userRole === "company") {
console.log(userRole);
setIsCandidate(false);
setIsCompany(true);
body.isCandidate = false;
body.isCompany = true
}
console.log("body : ", body);
const res = await axios.post(
"http://localhost:8000/user-role/recorded",
body
);
const otpRes = await axios.get(
`https://2factor.in/API/V1/b3014f3e-2e06-11ea-9fa5-0200cd936042/SMS/+91${phoneNumber}/AUTOGEN3`
);
console.log("res = ", res);
console.log("otp = ", otpRes);
};
.

Answer 2

You could do something like this:
Instead of using isCompany and isCandidate as states(because they aren't referred to anywhere in the component), update body inside the onSubmitHandler function itself.
console.log("signin card");
const [phoneNumber, setPhoneNumber] = useState("");
const onSubmitHandler = async () => {
const body = {
phoneNumber
};
console.log(userRole);
if (userRole === "candidate") {
body.isCandidate = true;
body.isCompany = false;
}
else if (userRole === "company") {
body.isCandidate = false;
body.isCompany = true;
}
console.log("body : ", body);
const res = await axios.post(
"http://localhost:8000/user-role/recorded",
body
);
const otpRes = await axios.get(
`https://2factor.in/API/V1/b3014f3e-2e06-11ea-9fa5-0200cd936042/SMS/+91${phoneNumber}/AUTOGEN3`
);
console.log("res = ", res);
console.log("otp = ", otpRes);
};
const onChangeHandler = (e) => {
setPhoneNumber(e.target.value);
};
return (
<>
<div
className="modal"
id="signInCard"
tabIndex="-1"
aria-hidden="true"
style={{
position: "fixed",
top: "0%",
left: "50%",
width: "100%",
height: "100%",
overflowX: "hidden",
overflowY: "auto",
transform: "translateX(-50%)",
zIndex: "1055",
}}
>
<div
className="modal-dialog modal-dialog-centered"
style={{ width: "20%" }}
>
<div className="modal-content">
<div className="modal-body p-5">
<div className="position-absolute end-0 top-0 p-3">
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div className="auth-content">
<div className="w-100">
<div className="text-center mb-4">
<h5>Sign In as {userRole}</h5>
<p className="text-muted"></p>
</div>
<form
onSubmit={(e) => {
onSubmitHandler();
}}
className="auth-form"
>
<div className="input-group mb-3">
{/* <label for="usernameInput" className="form-label">Phone No.</label> */}
<div className="input-group-prepend">
<span className="input-group-text" id="basic-addon1">
+91
</span>
</div>
<input
type="number"
name="phoneNumber"
className="form-control"
id="usernameInput"
placeholder="Enter your phone no."
aria-label="number"
aria-describedby="basic-addon1"
onChange={onChangeHandler}
value={phoneNumber}
/>
<span className="text-danger"></span>
</div>
<div className="text-center">
<a href="#otpModal" data-bs-toggle="modal">
<button
type="submit"
className="btn btn-primary w-100"
onClick={onSubmitHandler}
>
Sign In
</button>
</a>
{/* <a
href="#otpModal"
className="form-text user_sign"
data-bs-toggle="modal"
>
Candidate
</a> */}
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>