Help to create a new Section's component

Questions and Answers Frontend-React
1

Hello all, I’m customizing (and contributing) the great corporate starter.
One important feature I’m trying to implement is to be able to directly link selected Articles in the Home.
I think I’m almost there… these are the steps I took:
In the Admin>

  • Create a new component Article List with a field articles
    Article List has many Articles

  • Add Article List to the contentSections's Dynamic Zone of the Page collection

  • Content Manager> in Page Home add the Article List section and a couple of Articles

In the frontend src/app/[lang]/utils/section-renderer.tsx I’ve add

import BlogList from '@/app/[lang]/views/blog-list';
[...]
    case "sections.article-list":
      return <BlogList key={index} data={section} />;

but I got an error:

- error src/app/[lang]/views/blog-list.tsx (56:18) @ map
- error TypeError: articles.map is not a function
    at PostList (./src/app/[lang]/views/blog-list.tsx:22:36)
    at stringify (<anonymous>)
digest: "1064858862"
  54 |     <section className="container p-6 mx-auto space-y-6 sm:space-y-12">
  55 |       <div className="grid justify-center grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
> 56 |         {articles.map((article) => {

So it seems the section passed is not a list of articles. What should I do?
What do you use to debug?

2

I want to add a little more background info to hopefully receive some help:
If I hit (with insomnia) http://localhost:1337/api/pages?locale=en&filters=home I don’t get the articles:

					{
						"id": 1,
						"__component": "sections.article-list"
					}

So it seems a problem related to populate, but I’ve tried to use populate=* both in Next and in insomnia but it doesn’t returns the articles relational field.
Also the filter=slug doesn’t appears to work: I’ve always get all the pages as a response (I’ve added an About page to test out),
I’ve run out of ideas

3

I’m still stuck with this populate problem, I think I got the syntax but still doesn’t work.
To recap: Page has a dynamic zone (contentSections) with article-list component that has a field articles with relation to Article
I’ve tried with:

    populate: [
      "contentSections.articles",
      "sections.articles",
    ],

or

    populate: {
      contentSections:{
        populate: {
          articles: {
            populate: '*',
          },
        },
      },
    },

or

    populate: {
      articles: {
        populate: '*',
      },
    },

neither works!
To test this out and get a json I’ve created a new route in Next.js here is the full code
What I’m doing wrong?
(For test I’ve also added to article-list a title and a Component the title is retrieved automatically but not the Component I don’t know why)

4

No wonder I could not find the fetch used to retrieve the pages they are in page-populate-middleware.js in the backend not in the frontend!!!
This was very confusing it should be documented somewhere!
Once discovered I was able to populate the relational field just by adding:

      articles {
        populate: true,
      },

thanks for all the help:/

5

I’m sorry you didn’t get any help, but thank you for leaving your findings here for us future internet sleuths!

Kudos and good karma to you!