title: Uncaught (in promise) TypeError: Cannot read property 'fields' of undefined (React + Contentful)
body: <p>I'm trying to create a "portfolio" website to learn react. I've plugged content from Contentul, but i'm getting an error : <code>Uncaught (in promise) TypeError: Cannot read property 'fields' of undefined</code> when trying to display my content.</p>
  
  <p>Here's what i've done so far to get content from Contentful into my React app :</p>
  
  <ol>
  <li>I've creacted a contentful.js file </li>
  </ol>
  
  <pre class="lang-js prettyprint-override"><code>## contentful.js
  
  const client = require('contentful').createClient({
    space: 'MYSPACEID',
    accessToken: 'MYACCESSTOKEN',
  });
  
  const getProjectItems = () =&gt; client.getEntries().then((response) =&gt; response.items);
  
  const getSingleProject = (slug) =&gt;
    client
      .getEntries({
        'fields.slug': slug,
        content_type: 'project',
      })
      .then((response) =&gt; response.items);
  
  export { getProjectItems, getSingleProject };
  </code></pre>
  
  <p>Then, i've created 2 custom Hooks for getting my content :</p>
  
  <pre class="lang-js prettyprint-override"><code>## UseProjects.js
  
  import { useEffect, useState } from 'react';
  
  import { getProjectItems } from '../contentful';
  
  const promise = getProjectItems();
  
  export default function useProjects() {
    const [projects, setProjects] = useState([]);
    const [isLoading, setLoading] = useState(true);
  
    useEffect(() =&gt; {
      promise.then((project) =&gt; {
        setProjects(project);
        setLoading(false);
      });
    }, []);
  
    return [projects, isLoading];
  }
  </code></pre>
  
  <pre><code>## useSingleProject.js
  
  import { useEffect, useState } from 'react';
  
  import { getSingleProject } from '../contentful';
  
  export default function useSingleProject(slug) {
    const promise = getSingleProject(slug);
  
    const [project, setProject] = useState(null);
    const [isLoading, setLoading] = useState(true);
  
    useEffect(() =&gt; {
      promise.then((result) =&gt; {
        setProject(result[0].fields);
        setLoading(false);
      });
    }, [promise]);
  
    return [project, isLoading];
  }
  </code></pre>
  
  <p>I can add my components code if needed but i feel like my error comes from here.. What's weird is that if i close the error, i see all the items properly rendered (so..they're properly pulled from Contentful) and if i click on it i've got the correct informations displayed (title, image, etc.). But the error makes weird layout things.</p>
  
  <p>The error comes from my useSingleProject.js file (<code>useSingleProject.js:13</code>)</p>
  
  <p>Now here i feel it can also come from my App.js file, i'm not sure about how i configured the routing for single project pages (i'm still new to react..). If i disable the following line from the <code>routes</code> array : <code>{ path: '/:id', name: ':id', Component: SingleProject }</code>, then the error disapears. I can see all the projects on my projects page, but if i click on one of them the slug changes but nothing shows on the single project pages, since i've disabled it.</p>
  
  <pre class="lang-js prettyprint-override"><code>## App.js
  
  import React, { useEffect } from 'react';
  import { Route } from 'react-router-dom';
  import { gsap } from 'gsap';
  import './styles/App.scss';
  import Header from './components/header';
  import Navigation from './components/navigation';
  
  import CaseStudies from './pages/caseStudies';
  import Approach from './pages/approach';
  import Services from './pages/services';
  import About from './pages/about';
  import Home from './pages/home';
  import Projects from './pages/projects';
  import SingleProject from './pages/SingleProject';
  
  const routes = [
    { path: '/', name: 'Home', Component: Home },
    { path: '/case-studies', name: 'caseStudies', Component: CaseStudies },
    { path: '/approach', name: 'approach', Component: Approach },
    { path: '/services', name: 'services', Component: Services },
    { path: '/about-us', name: 'about', Component: About },
    { path: '/projects', name: 'projects', Component: Projects },
    { path: '/:id', name: ':id', Component: SingleProject },
  ];
  
  function debounce(fn, ms) {
    let timer;
    return () =&gt; {
      clearTimeout(timer);
      timer = setTimeout(() =&gt; {
        timer = null;
        fn.apply(this, arguments);
      }, ms);
    };
  }
  
  function App() {
    const [dimensions, setDimensions] = React.useState({
      height: window.innerHeight,
      width: window.innerWidth,
    });
  
    useEffect(() =&gt; {
      // prevents flashing
      gsap.to('body', 0, { css: { visibility: 'visible' } });
      const debouncedHandleResize = debounce(function handleResize() {
        setDimensions({
          height: window.innerHeight,
          width: window.innerWidth,
        });
      }, 1000);
  
      window.addEventListener('resize', debouncedHandleResize);
      return () =&gt; {
        window.removeEventListener('resize', debouncedHandleResize);
      };
    });
    return (
      &lt;&gt;
        &lt;Header dimensions={dimensions} /&gt;
        &lt;div className="App"&gt;
          {routes.map(({ path, Component }) =&gt; (
            &lt;Route key={path} exact path={path}&gt;
              &lt;Component dimensions={dimensions} /&gt;
            &lt;/Route&gt;
          ))}
        &lt;/div&gt;
        &lt;Navigation /&gt;
      &lt;/&gt;
    );
  }
  
  export default App;
  </code></pre>
  
  <p><strong>EDIT :</strong> 
  So i've tried to <code>console.log(response.items)</code> in my getSingleProject function. It returns the correct array of object (so here containing only one object).</p>
  
  <p>I've also tried tu <code>console.log(result)</code> in my useProjects function (inside the useEffect). It still logs the correct object, and it has the fields property i need to get. When console logging in my useEffect, it logs the object every second or so by the way. Is this a normal behavior?</p>