How to add handlechange to this code for Validation .(i have used react-hook-form)

Question

Can any can add handlechange to it with the validation

https://codeshare.io/5ObD1r

Answer 1

You don't need to use handleChange when you're using react-hook-form it handles your input value by its ref .

function Login(props) {
  console.log(props, "insidelogin");
  const { register, handleSubmit, errors, watch } = useForm();

  //if you need any value just use watch like this:
  console.log(watch("password"));

  const handleSubmitClick = (data) => console.log(data);

  return (
    <>
      <Modal
        {...props}
        style={{ zIndex: "9999" }}
        size="lg"
        aria-labelledby="contained-modal-title-vcenter"
        centered
      >
        <Modal.Header closeButton>
          <Modal.Title id="contained-modal-title-vcenter">
            Modal heading
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <Form onSubmit={handleSubmit(handleSubmitClick)}>
            <Form.Group controlId="formGroupMobileNumber">
              <Form.Label>Mobile Number</Form.Label>
              <Form.Control
                type="tel"
                placeholder="Mobile number"
                name="Mobile number"
                value={state.phonenumber}
                onChange={handleChange}
                type="tel"
                ref={register({ required: true, minLength: 10, maxLength: 12 })}
              />
              {errors.mobilenumber &&
                errors.mobilenumber.type === "required" && (
                  <p className="errorMsg">mobilenumber is required.</p>
                )}
              {errors.mobilenumber &&
                errors.mobilenumber.type === "minLength" && (
                  <p className="errorMsg">mobilenumber should be 10 number.</p>
                )}
            </Form.Group>

            <Form.Group controlId="formGroupPassword">
              <Form.Label>Password</Form.Label>
              <Form.Control
                id="password"
                placeholder="password"
                name="password"
                value={state.password}
                onChange={handleChange}
                type="password"
                ref={register({ required: true, minLength: 6 })}
              />
              {errors.password && errors.password.type === "required" && (
                <p className="errorMsg">Password is required.</p>
              )}
              {errors.password && errors.password.type === "minLength" && (
                <p className="errorMsg">
                  Password should be at-least 6 characters.
                </p>
              )}
            </Form.Group>
            <Button color="black" type="submit">
              Submit
            </Button>
          </Form>
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={props.onHide}>Close</Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}