react bootstrap form.switch not working as expected

Question

I have used react-bootstrap Form. I need to use switch button. If that is true then have to show input box else input box will not show.

  const initialState = {
    billingType: "",
    basicFees: false,
    basicFeesCharges: 0
  }
 const [form, setForm] = useState(initialState);
 const [toggle, setToggle] = useState(false);

  useEffect(() => {
    console.log('toggle effect',toggle);
    console.log('use effect form',form);
  }, [toggle,form]);

  const setField = (field, value) => {
    console.log("field", field);
    console.log("value", value);
    setForm({
      ...form,
      [field]: value,
    });
    console.log("set field ", form);
    // Check and see if errors exist, and remove them from the error object:
    if (!!errors[field]) {
      setErrors({
        ...errors,
        [field]: null,
      });
    }
  };

JSX

 <Form.Group>
                          <Form.Check
                            type="switch"
                            name="basicFees"
                            id="custom-switch"
                            label="Basic Fees"
                            checked={toggle}
                            onChange={(e) => {
                              setToggle(!toggle);
                              setField("basicFees",toggle);
                            }}
                          />
                          Here fees {form && form.basicFees ? "on" : "off"}
                          {form && form.basicFees ? (
                            <>
                              <Form.Label>Basic Fees Charges</Form.Label>
                              <Form.Control
                                type="text"
                                name="basicFeesCharges"
                                onChange={(e) =>
                                  setField("basicFeesCharges", e.target.value)
                                }
                                isInvalid={!!errors.basicFeesCharges}
                              />
                              <Form.Control.Feedback type="invalid">
                                {errors.basicFeesCharges}
                              </Form.Control.Feedback>
                            </>
                          ) : (
                            ""
                          )}
                        </Form.Group>

Problem: with above code, I am not getting proper result. By default, switch is off. When I first click then ideally it should show input box of basicFeesCharges but it does not shows and switch is 'On' at that time. On second click it shows input box of basicFeesCharges and switch button is 'Off' that time. Means state or form does not updating properly onChange even if used useEffect. So giving opposite result for switch button.

As a beginner, I am not able to find bug or correct solution even after trying different syntax or code. Please help and guide. Thanks.

Answer 1

Its because of your onChange function

onChange={(e) => {
    setToggle(!toggle);
    setField("basicFees",toggle);
}}

setToggle is asynchronous, so the toggle in setField is still false at 1st time. So try this

onChange={(e) => {
    const newToggle = !toggle;
    setToggle(newToggle);
    setField("basicFees", newToggle);
}}