Setting value of input field doesn’t update visually

by

In my React JS code I am working with HTML that comes from a server, I am trying to use eventlisteners to preset the value of #email but the value only appears visually in the input field once I try to type in it. Forcing a rerender or typing in other input fields does not seem to cause the #email input field to update.

 useEffect(() => {

    const handleChange = event => {
      const { target } = event;
      if (target.matches("#OTP")) {
        OTPValueRef.current = target.value
      } else if (target.matches('#email')) {
        target.value = "test"
      }
    };

    const moveToRegister = event => {
      const { target } = event;
     if (target.matches("#productSubmit")) {
        confirmModal("ConsentForm");
      } else if (target.matches("#consentSubmit")) {
        confirmModal("done")
      }
    };

    document.addEventListener("input", handleChange);
    document.addEventListener("click", moveToRegister);
  }, [markdown]);

I’ve tried using chatGPT but it doesn’t give any helpful answers besides suggesting I change how the server handles inputs, which is not currently possible as the system is managed by another company.

  • Why don’t use controlled component for the #email element and hooks? And I’m not sure why you define the functions inside useeffect?

    – 




  • Could you share more detailed code with dom?

    – 

  • Don’t know why you are doing this. but you can directly set value to any dom element in useEffect like document.querySelector('#email').value = "test";

    – 

Leave a Comment