title: (ReactJS) "Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined ..."
body: <p>The UserForm  which is controlled by another controller complains on console as <strong>&quot;Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: <a href="https://reactjs.org/link/controlled-components" rel="nofollow noreferrer">https://reactjs.org/link/controlled-components</a>
  input
  span
  li
  ul...&quot;</strong></p>
  <p>This is the component code:</p>
  <pre class="lang-js prettyprint-override"><code>export default({user}) =&gt; {
    if(!user) {
      return &lt;div&gt;&lt;/div&gt;
    } else {
      const [name,setName] = useState(user.name|| &quot;&quot;)
      useEffect(() =&gt; {
        setName(user.name);
      }, [user])
                
      return &lt;form&gt;
               &lt;fieldset&gt; 
                 &lt;legend&gt; Edit  {user.name }&lt;/legend&gt;
                 &lt;p&gt; 
                   &lt;label htmlFor={&quot;name&quot;}&gt; Name  &lt;/label&gt;
                   &lt;input  id=&quot;name&quot; value={name || &quot;&quot;} onChange={e =&gt; setName(e.target.value)} /&gt;
                 &lt;/p&gt; 
               &lt;/fieldset&gt;
             &lt;/form&gt;
    }
  }
  </code></pre>
  <p>I tried all fixes suggested on other stackoverflow answers but still gives warning.<br />
  Is there something I migth missing?</p>