Multiple, nested, repeatable Components

Hello,

I think I have the same problem. Can you maybe check if its the same issue?

I want to create three different components:

button
card
section

I want to use the button in the card-component and the card-component in the section-component.

But this is not possible. If the card has the button component I can not select it inside the section-component. This is just possible when the card has no button.

It seems that this behaviour is because these components are nested.

As long the card-component is not used inside the section-component I can add other components to it.

Unfortunately I don’t understand the suggested solution for this. I can’t use dynamic zones or relations because my elements are components. So how can I solve it in my case?

Is there a solution for this without hacking it in a not supported way? Is there a way to increase the nesting-limit to three?

And another question:

Is there anything in the documentation about this?

Thanks for some help!

Best regards,

Timo

I now just added the component manually to the card-component json-file:

"button": {
  "type": "component",
  "repeatable": false,
  "component": "elements.button"
}

Seems that everything works fine in the frontend. So is this the way to solve this?

4 Likes

Any sources for how we can hack this together?
Really need this for a project. Assumed strapi would have handled this before i started (bad i know)

This is a very basic concept of design. Atom, molecule and organism. I cannot design a single page section with the current nesting limit. Is there a way to enable or override to at least 3 and make it somehow usable without manual hacks? Thanks for your attention.

3 Likes

No way to do this unfortunately (unless you want to build it yourself possibly), If you are not already too deep into the project I would say to avoid strapi. If this is something you need to do then you will find a ton more limitations along the way. Try prisma or playbooks

If you need that deep level of nest I suggest using relations and not components. What you are attempting to do with components at this level is not what we intended them to be used for.

I also believe that nesting should be possible. It’s a common usecase to nest components and in my opionion it is no argument to restrict it only for reasons of performance. It is worse when a user can’t do what he wants to do… And developers end up hacking their own solution is even worse.

5 Likes

we limit the nesting to two

Two is very constraining. Even increasing the nesting limit to 3 or 4 would really help here.

I don’t need dynamic zones in the more atomic (deeper) components, I just want modular composition of components so we can separate concerns and efficiently compose pieces of our design system.

Flattening component hierarchies to achieve 2 levels requires repeating things across components and makes it harder to build and maintain your components and content.

Can you improve performance to allow at least slightly deeper component nesting?

4 Likes

Yes 3 or 4 levels would be better but it should be developers decision how many levels he needs. And what does poor performance mean? 100ms? 2 seconds longer? It’s a basic feature of a cms vs. Insufficiency of the system to deliver it. In my opinion it must be solved in order to be a real option for many projects. For now it’s a show stopper.

7 Likes

Shouldn’t this at least be easy to override in ./extensions/content-manager? Would love some direction there.

4 Likes

Any changes in v4 for this?

2 Likes

totally agree!

I think Strapi looked promising, but this lack of nesting is definitely a show-stopper when it comes to setting up a grid based page-builder.

5 Likes

Nesting components is one of the most basic things the content editor would want to do. Without that possibilty every page just looks kind of the same.

4 Likes

Couldn’t agree more, unfortunately. :anguished:

I think that allowing for more levels of nested components would be another killer feature for strapi!

I imagine it would make the internals much more complex if an unlimited number of nested components was allowed. But a good compromise would be maybe 3 or 4 levels? More than that I guess it’s not that common. But there are many situations where it’s easy to reach 3-level deep nested components.

3 Likes

Did anyone try this out?
I had a requirement wherein the page has sections. Every section has two columns. Within each column, there is a dynamic zone.
I tried creating these relations in component (with code).

However, the next issue I’m facing is that the admin panel doesn’t support it.

Has anyone tried modifying the admin panel to support something like this?

Seems my Inception idea failed!

I have a hack-ey way. I’ll create one more fake component denoting section break. Let users keep adding all content to one dynamic zone. Every time there is a section break component, we’ll change from left to right or right to the next section.🤦

Without nesting at least 5 there is no way to use strapi in real-life projects. :frowning:

For example:
here is simplest navigation single component:


How come I can add page relation (see the arrow on the screenshot) but In UI after clicking the save button - I am not able to see any more saved value?
Is there any suggestion on how can I implement that navigation using relation?

@DMehaffy DMehaffy

3 Likes

There is a known bug about this. TBH with regards to navigation, it might be better to use a plugin for that such as:
https://market.strapi.io/plugins/strapi-plugin-navigation

hello @DMehaffy , what is the prediction of this bug to be resolved? I’m depending on this urgently on a project that is going into production.