title: A component is changing controlled i/p to be uncontrolled. This is caused by value changing from defined to undefined Decide between using controlled/
body: <p>this is my login.js</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  // import { BrowserRouter as Router, Route } from &quot;react-router-dom&quot;;
  import axios from &quot;axios&quot;;
  import { Redirect } from &quot;react-router-dom&quot;;
  import Footer from &quot;./Bottom&quot;;
  // import { FaUser, FaUnlock } from &quot;react-icons/fa&quot;;
  
  const Login = () =&gt; {
    //functional component
    const [login, setLogin] = useState({ username: &quot;&quot;, password: &quot;&quot; });
    // const [isSignUp, setisSignUp] = useState(&quot;&quot;);
  
    let user;
  
    const handleChange = (e) =&gt; {
      const name = e.target.name;
      const value = e.target.value;
      setLogin({ ...Login, [name]: value });
    };
  
    const handleSubmit = (e) =&gt; {
      e.preventDefault(); //reload the page
  
      if (login.username &amp;&amp; login.password) {
        axios
          .post(&quot;http://localhost:8080/api/registration/login&quot;, {
            username: login.username,
            password: login.password,
          })
          .then((response) =&gt; {
            sessionStorage.setItem(&quot;user&quot;, JSON.stringify(response.data));
            user = response.data;
            console.log(user + &quot;**********************&quot;);
  
            var usertype = response.data.usertype;
            console.log(usertype + &quot;////////////&quot;);
            console.log(user + &quot;*********&quot;);
            if (usertype === 1) return &lt;Redirect to=&quot;/profile&quot; /&gt;;
            // window.location.href = &quot;http://localhost:3000/profile&quot;;
            // console.log(&quot;Seller&quot;);
            else if (usertype === 0) return &lt;Redirect to=&quot;/buyerprofile&quot; /&gt;;
            // window.location.href = &quot;http://localhost:3000/buyerprofile&quot;;
            // console.log(&quot;Buyer&quot;);
          })
          .catch((error) =&gt; {
            console.log(error.response);
          });
        setLogin({ username: &quot;&quot;, password: &quot;&quot; });
      }
    };
    return (
      &lt;&gt;
        &lt;head&gt;
          &lt;link
            rel=&quot;stylesheet&quot;
            href=&quot;font-awesome-4.7.0\css\font-awesome.min.css&quot;
          /&gt;
        &lt;/head&gt;
        &lt;section className=&quot;vh-100&quot;&gt;
          &lt;div className=&quot;container h-100&quot;&gt;
            &lt;div className=&quot;row d-flex justify-content-center align-items-center h-100&quot;&gt;
              &lt;div className=&quot;col-lg-8 col-xl-9&quot;&gt;
                &lt;div className=&quot;card text-black&quot; style={{ borderRadius: &quot;25px&quot; }}&gt;
                  &lt;div className=&quot;card-body p-md-5&quot;&gt;
                    &lt;div className=&quot;row justify-content-center&quot;&gt;
                      &lt;div className=&quot;col-md-10 col-lg-6 col-xl-7 order-2 order-lg-1&quot;&gt;
                        &lt;p className=&quot;text-center h1 fw-bold mb-5 mx-1 mx-md-4 mt-4&quot;&gt;
                          Login
                        &lt;/p&gt;
  
                        &lt;form onSubmit={handleChange} className=&quot;mx-1 mx-md-4&quot;&gt;
                          &lt;div className=&quot;d-flex flex-row align-items-center mb-4&quot;&gt;
                            &lt;i
                              class=&quot;fa fa-user-circle fa-lg&quot;
                              aria-hidden=&quot;true&quot;
                            &gt;&lt;/i&gt;
                            &lt;div className=&quot;form-outline flex-fill mb-0&quot;&gt;
                              &lt;input
                                type=&quot;text&quot;
                                id=&quot;username&quot;
                                name=&quot;username&quot;
                                className=&quot;form-control&quot;
                                placeholder=&quot;User Name&quot;
                                value={login.username}
                                onChange={handleChange}
                              /&gt;
                              {/* {errors.username &amp;&amp;&lt;p className=&quot;error&quot;&gt;{errors.username}&lt;/p&gt;} */}
                            &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div className=&quot;d-flex flex-row align-items-center mb-4&quot;&gt;
                            &lt;i class=&quot;fa fa-unlock fa-lg&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;{&quot; &quot;}
                            &lt;div className=&quot;form-outline flex-fill mb-0&quot;&gt;
                              &lt;input
                                type=&quot;password&quot;
                                id=&quot;password&quot;
                                name=&quot;password&quot;
                                className=&quot;form-control&quot;
                                placeholder=&quot;Password&quot;
                                value={login.password}
                                onChange={handleChange}
                              /&gt;
                              {/* {errors.password &amp;&amp;&lt;p className=&quot;error&quot;&gt;{errors.password}&lt;/p&gt;} */}
                            &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div className=&quot;d-flex justify-content-center mx-4 mb-3 mb-lg-4&quot;&gt;
                            &lt;button
                              type=&quot;submit&quot;
                              className=&quot;btn btn-primary btn-lg&quot;
                              onClick={handleSubmit}
                            &gt;
                              Login
                            &lt;/button&gt;
                          &lt;/div&gt;
                        &lt;/form&gt;
                      &lt;/div&gt;
                      &lt;div className=&quot;col-md-10 col-lg-6 col-xl-5 d-flex align-items-center order-1 order-lg-2&quot;&gt;
                        &lt;img/&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/section&gt;
        &lt;Footer /&gt;
      &lt;/&gt;
    );
  };
  
  export default Login;
  </code></pre>
  <p>&amp; if I try to login with my credentials it throws this error in console &amp; this warning shows as soon as I start typing in input field</p>
  <pre><code>Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.     at input
      at div
      at div
      at form
      at div
      at div
      at div
      at div
      at div
      at div
      at div
      at section
      at Login 
  </code></pre>
  <p>I am new to react &amp; I was trying my hands with react+sprinboot project, I saw some answers on uncontrolled input to controlled but here it's in-&gt; reverse controlled input to uncontrolled,so what exactly is the difference?</p>