0

I am using ReactJS. In my page, I have two forms form1 and form2 which switches from form1 -> form2 on state change. This state change is because of recaptcha verification in the firebase Auth. When recaptcha verified successfully, let [phone, setPhone] = useState(false) state of the phone changes. If false -> form1 & if true->form2.

Problem arises when I put phone number in input of form 1. After, captcha verification when form 2 render due to state change, value of input in form 2 have the default value of input of form 1.

let [phoneAuth, setPhoneAuth] = useState(false);
                {!phoneAuth ? 
                    <form id="123456" class="d-flex flex-column justify-content-center" method="get" style={{width:"300px"}} onSubmit={formHandler}>
                        <h1 class="mb-3 h3 fw-normal">Sign In Please...</h1>
                        <input id="phone" class="rounded" type="number" placeholder="Mobile number" class="p-2" name="phone" /> <br />
                        <div id="captcha-widget"></div>
                        <button id="sign-in-button" type="submit" style={{textAlign:"center"}} class="btn btn-outline-success ">Get OTP</button>
                    </form>
                    :
                    <form id="23456" class="d-flex flex-column justify-content-center" action="/" method="get" style={{width:"300px"}} onSubmit={otpHandler}>
                        <h1 class="mb-3 h3 fw-normal">Sign In</h1>
                        <input id="otp" type="number" placeholder="Enter OTP" name="otp" />
                        <button id="sign-in-button" type="submit" style={{textAlign:"center"}} class="btn btn-outline-success ">Submit OTP</button>
                    </form>
                }
Alok Prakash
  • 191
  • 1
  • 9
  • Its because you are using `uncontrolled` way. Try with `controlled(managing inputs your own)`. Do read this for more reference: https://stackoverflow.com/questions/42522515/what-are-react-controlled-components-and-uncontrolled-components – Shubham Verma Aug 10 '21 at 09:08
  • But, Is there any way to fix this. Because, If state changes component re-render and everything reset to default values. If this happens new input value must be blank or with default value. But in my case, the new input is having value of other input element. What's going on in the background ? – Alok Prakash Aug 10 '21 at 10:45

0 Answers0