Fetching from Ghost using React Hooks

Developer help
1

Hi all-

I’m brand new to Ghost and fairly new to React hooks. I was able to use the GhostContentAPI to fetch my blog posts but for some reason am struggling to display the data to the page. This is what my code currently looks like:

import React, { useState, useEffect } from 'react';
import GhostContentAPI from '@tryghost/content-api';

function Blog() {
  const [state, setState] = useState();
  const api = new GhostContentAPI({
    url: '',
    key: '',
    version: 'v3',
  });

  // fetch 5 posts, including related tags and authors
  useEffect(() => {
    api.posts
      .browse({ limit: 6, include: 'tags,authors' })
      .then((res) => setState(res))
      .catch((err) => {
        console.error(err);
      });
  });

  return (
    <>
      <>
        {state.map((post) => (
          <div>{post.title}</div>
        ))}
      </>
    </>
  );
}

export default Blog;

I deleted the URL and key but I have them plugged in there in my actual code. With this code, I’m getting ‘Cannot read property ‘map’ of undefined’. Any idea what I’m missing? Thanks in advance!

2

I think you need to set the default state to an empty array (useState([])), since the initial state is undefined