title: Warning: A component is changing an uncontrolled input of type text to be controlled
body: <p>I am new in React development after some practice  I was creating a form using react and In console showed some errors, I am seeing this type of error the first time so please can you help me understand this?
  How I can solve this ? where I did mistake?</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
      
      const ControlledInputs = () =&gt; {
        const [username, setUsername] = useState();
        const [email, setEmail] = useState();
      
        const handleSubmit = (e) =&gt; {
          e.preventDefault();
          console.log(username, email);
        };
      
        return (
          &lt;&gt;
            &lt;article&gt;
              &lt;form className=&quot;form&quot; onSubmit={handleSubmit}&gt;
                &lt;div className=&quot;form-control&quot;&gt;
                  &lt;label htmlFor=&quot;firstName&quot;&gt;Username :&lt;/label&gt;
                  &lt;input
                    type=&quot;text&quot;
                    name=&quot;username&quot;
                    id=&quot;username&quot;
                    value={username}
                    onChange={(e) =&gt; setUsername(e.target.value)}
                  /&gt;
                &lt;/div&gt;
                &lt;div className=&quot;form-control&quot;&gt;
                  &lt;label htmlFor=&quot;email&quot;&gt;Email : &lt;/label&gt;
                  &lt;input
                    type=&quot;text&quot;
                    name=&quot;email&quot;
                    id=&quot;email&quot;
                    value={email}
                    onChange={(e) =&gt; setEmail(e.target.value)}
                  /&gt;
                &lt;/div&gt;
                &lt;button&gt;Add User&lt;/button&gt;
              &lt;/form&gt;
            &lt;/article&gt;
          &lt;/&gt;
        );
      };
      
      export default ControlledInputs;
  </code></pre>
  <p><strong>Showing Error in console</strong>
  <strong>Warning</strong>:</p>
  <pre><code>` A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. 
      in input (at 1-controlled-inputs.js:18)
      in div (at 1-controlled-inputs.js:16)
      in form (at 1-controlled-inputs.js:15)
      in article (at 1-controlled-inputs.js:14)
      in ControlledInputs (at App.js:7)
      in div (at App.js:6)
      in App (at src/index.js:8)
      in StrictMode (at src/index.js:7)
  `
  </code></pre>