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

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

CodePudding user response：

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);
  };

CodePudding user response：

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>