title: React Error: TypeError: Cannot destructure property
body: <p>I have this error « Error:  TypeError: Cannot destructure property 'id' of 'fetchedData' as it is undefined. » and I don’t know how to  deal with it</p>
  <p>It’s a react app (port 3001) that use a micro API (port 3000).</p>
  <pre><code>import Data from &quot;./Data&quot;;
  
  export default class Service {
  
    /**
     * Fetch the user main data from the API
     * @param   {function}  resolve   the function for success
     * @param   {number}    id        the user ID
     * @return  {void}
     */
     getData = (resolve, id) =&gt; {
      fetch(`http://localhost:3000/user/${id}`)
        .then((response) =&gt; response.json())
        .then((result) =&gt; {
          const data = new Data();
       console.log(result)
          resolve(data.getData(result.data));
        })
        .catch((error) =&gt; {
          console.log(&quot;Error: &quot;, error);
        })
    };
  }
  </code></pre>
  <p>the console log tell me « can not get user »</p>
  <p>here is the Data class</p>
  <pre><code>export default class Data {
    /**
     * Service to handle the fetched data (user data)
     * @param   {object}  fetchedData   The data from the API
     * @return  {object}                The formatted data for the front
     */
    getData(fetchedData) {
      const { id, userInfos } = fetchedData;
      const { firstName, lastName, age } = userInfos;
      const userObj = new Infos(firstName, lastName, age);
      const userDataObj = new MainData(id, userObj);
  
      return userDataObj;
    }
  }
  </code></pre>
  <p>I’ve no idea how to deal with this error and where is my mistake.</p>