2021-12-20
3652
#react
Ovie Okeh
11051
Dec 20, 2021 â‹… 13 min read

Using Contentful with React

Ovie Okeh Programming enthusiast, lover of all things that go beep.

Recent posts:

what are the event loop and call stack in JavaScript

What are the event loop and call stack in JavaScript?

Learn how the call stack, event loop, and various queues help JavaScript handle asynchronous operations while maintaining its single-threaded nature.

Ikeh Akinyemi
Feb 18, 2025 â‹… 6 min read
how and when to use JavaScript arrow functions

How and when to use JavaScript arrow functions

Arrow functions have a simpler syntax than standard functions, and there are some important differences in how they behave.

Joe Attardi
Feb 17, 2025 â‹… 5 min read
javascript is null or empty function

How to check for null, undefined, or empty values in JavaScript

In most languages, we only have to cater to null. But in JavaScript, we have to cater to both null and undefined. How do we do that?

Lewis Cianci
Feb 14, 2025 â‹… 4 min read
MERN Stack: Overview With Examples

What is the MERN stack? Overview with examples

Discover how the MERN stack (MongoDB, Express.js, React, Node.js) enables developers to build dynamic, performant, modern websites and apps.

Nefe Emadamerho-Atori
Feb 13, 2025 â‹… 20 min read
View all posts

4 Replies to "Using Contentful with React"

  1. Noob question: Does a developer need a CMS? I didn’t think about one, but then I realized that managing a hundred posts, which each post having on average 5 iages, becomes quite painful.

  2. Hi Ovie, I’ve followed your tutorial however when the user clicks on an individual post the SinglePost component renders in an endless loop. Any ideas? Cheers.

  3. Anyone stumbling upon this article and getting infinite loops in the Network tab you need to change the useEffect slightly:

    export default function useSinglePost(slug) {
    const [post, setPost] = useState(null);
    const [isLoading, setLoading] = useState(true);
    useEffect(() => {
    getSinglePost(slug)
    .then(result => {
    setPost(result[0].fields);
    setLoading(false);
    });
    }, [slug]);
    return [post, isLoading];
    }

Leave a Reply