title: How do I display content from API in text field in React?
body: <p><strong>Overview:</strong></p>
  <p>I am trying to put some content in a text field for editing, but I am getting an error.</p>
  <p><strong>The Problem:</strong></p>
  <p>I would get an error that says <code>TypeError: Cannot read property 'favorite_animal' of undefined</code></p>
  <p><strong>My Code:</strong></p>
  <pre><code>// import ...
  // import ...
  
  function getDataFromApi(id) {
    var url =
      &quot;https://api.example.com/&quot; + id;
    return fetch(url, {
      method: &quot;GET&quot;,
      headers: {
        Accept: &quot;application/json&quot;,
        &quot;Content-Type&quot;: &quot;application/json&quot;,
      },
    })
      .then((response) =&gt; response.json())
      .then((responseData) =&gt; {
        return responseData;
      })
      .catch((error) =&gt; console.warn(error));
  }
  
  function myFunction(props) {
    const [data, setData] = useState([]);
    useEffect(() =&gt; {
      getDataFromApi(props.id).then((response) =&gt; setData(response));
    }, []);
  
    return (
      &lt;&gt;
        &lt;Form&gt;
          &lt;TextField&gt;{data.details.favorite_animal}&lt;/TextField&gt;
        &lt;/Form&gt;
      &lt;/&gt;
    );
  }
  
  export default myFunction;
  </code></pre>
  <p>Any ideas?</p>