title: How to update default value of MUI TextField?
body: <p>I'm finishing up the final steps of my form however I have encounter an issue when trying to display the current name of the user in the <code>defaultValue</code> variable of the <code>TextField</code> from MUI.</p>
  <p>If a value starts on <code>&quot;&quot;</code>/<code>null</code> or basically empty the <code>defaultValue</code> will stay empty doesn't matter how many times you update that value from &quot;&quot;/null to something, is there a way to fix that?</p>
  <p>I have this:</p>
  <pre><code>{console.log(tempName)}
  
  &lt;TextField 
  required 
  margin=&quot;dense&quot; 
  label='Nombre' 
  defaultValue= {tempName} 
  onChange={handleChangeName} /&gt;
  </code></pre>
  <p><code>tempName</code> starts empty but then I update it in a <code>useEffect</code> I have that brings the data of the document of the user I'm log in atm, even after having a value the <code>defaultValue</code> stays empty/null/&quot;&quot;.</p>
  <p><a href="https://i.stack.imgur.com/cn6hm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cn6hm.png" alt="enter image description here" /></a></p>
  <p>There's something else I did notice though, if you use the <code>user.displayName</code> directly it does works but only until you refresh (because when you refresh user goes back to null and then like .2 segs is back to his value)</p>
  <p>this is how it looks when I use user before refresh</p>
  <p><a href="https://i.stack.imgur.com/tytJx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tytJx.png" alt="enter image description here" /></a></p>
  <p>since user brings both name and lastname (displayName, basically) I wanted to split it and all the user information is in a document :</p>
  <pre><code>    const [tempName, setTempName] = useState(&quot;&quot;);
      const [tempLastName, setTempLastName] = useState(&quot;&quot;);
      const [tempEmail, setTempEmail] = useState(&quot;&quot;);
      const [tempPhone, setTempPhone] = useState(&quot;&quot;);
      const [tempIdType, setTempIdType] = useState(&quot;&quot;);
      const [tempIdTypes, setTempIdTypes] = useState(&quot;&quot;);
  
      useEffect(() =&gt; {
          const userDoc = db.collection('usuarios').doc(user.uid);
          userDoc.get().then(doc =&gt; {
              if (doc.exists) {
                  const tempData = [];
                  const data = doc.data();
                  tempData.push(data);
                  setTempName(tempData[0].name)
                  setTempLastName(tempData[0].lastName)
                  setTempEmail(tempData[0].email)
                  setTempPhone(tempData[0].phone)
                  setTempIdType(tempData[0].id)
                  setTempIdTypes(tempData[0].idType)
                  setOldPassword(tempData[0].password)
              }
            });
      }, [user])
  </code></pre>
  <p>This is how it looks in the firebase</p>
  <p><a href="https://i.stack.imgur.com/tukyn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tukyn.png" alt="Mock data" /></a></p>
  <p>Is that how is suppose to work?</p>
  <p>I would have think that <code>defaultValue</code> will update to the value you are giving it... Thank you, I didn't find anything related with this on <a href="https://mui.com/components/text-fields/#basic-textfield" rel="nofollow noreferrer">TextField documentation</a>. All I know is that they add initialized values from the very beginning and not values that get &quot;updated&quot; with time, I just wanted to display the current information of the user in the form.</p>