.map is not a function error when looping through posts Next JS

Developing with Prismic
1

Hi, I'm having difficulty displaying some posts. I've followed nearly every tutorial out there and the official Prismic documentation, but I cannot get my head around what I am doing wrong. I keep getting the error

TypeError: articles.map is not a function

I know that I have set everything up to pull data in fine, as the elements from my getSingle are working. Here is my code for this specific data:

export async function getStaticProps() {

  // The single is working fine
  const document = await Client.getSingle('home')

  const articles = await Client.getByType('articles')

 // The articles data is logging fine in the console
  console.log(articles)

  return {
    props: {
	 articles,
	 document
    }
  }
}

...and then returning in the page...

  <ul>
    {articles.map((article) => (
      <li key={article.id}>{article.title}</li>
    ))}
  </ul>

gives the error: TypeError: articles.map is not a function. This is how I have seen this in countless youTube videos - where am I going wrong? Any help is much appreciated.

Thanks

2

Hey @jon1 :wave:

That error means that articles is not an array. Maybe your should be doing something like article.results.map?

Can you share what it logs both inside getStaticProps and on the page please?

2 Likes
3

Hi @vitor1,

So doing an articles.results.map gives this error now:

error - Error: Objects are not valid as a React child (found: object with keys {type, text, spans}). If you meant to render a collection of children, use an array instead.

Sorry, I am still quite new to javascript :confused:

4

No worries mate, we'll get there.

error - Error: Objects are not valid as a React child (found: object with keys {type, text, spans}). If you meant to render a collection of children, use an array instead.

This error means that you're trying to print an object straight into a React object, which doesn't work. I'm assuming there's an {articles.results.map} or {articles} lost somewhere inside your component's return function.

Can you try doing adding console.log(articles) into your page's code and share it the console output? Also, the more code you share the easier it will be for me to help you so if you have a public repo for that project that would be great.

1 Like
5

Thanks Vitor, my code is up here - https://github.com/JonQuayle/Next-js-starter - feel free to have a poke around. This specific error is occurring in the index.js file of the pages folder.

I'm a little lost as to whether the data is getting lost inside the function, I'm not sure how I can tell.

Many thanks for your help on this.

6

I saw that you've made some changes to the repo since your last message. Did you get to understand what is happening?

The errors you've reported are more of JS/React errors than anything to do with Prismic, so I'm not sure how can I further help you here.

One thing that can help is going through Next.js docs, I find that this page in particular can help a lot. Once you get to know Next.js better everything Prismic will seem much easier :smile:

1 Like
7

Not really, I was trying some things whilst trying to figure out what was happening. Thanks for your help though. I'm just going to keep working at it and see if it works. I am console logging the articles, so they are being queried correctly but whatever method I try to convert those article objects into an array it throws a wobbly every time. Seems kinda long winded to grab a few articles :joy: but then again I'm not great at a lot of JS.

9

Hello @jon1

Welcome to the Prismic community and thanks for reaching out to us.

When you perform a query by getByType, you will get a results array containing all matching results. You are storing in an articles array. For example, if you want to retrieve a Key text field, It should be like this:

articles.results[0].data.example_key_text

Please find more details in Template Content article.

Let me know if you have any further questions.

Thanks,
Priyanka

10

Thanks @Priyanka, that link was really helpful and I've sorted my issue now. Thanks again!

1 Like