I tried to use the FoodAdvisor Demo as a best practise blueprint but quite quickly got stuck.
Within the demo there are components nested like this:
On my strapi v4.1.3 installation I cannot select component as field when the component hast already another component as a field…what am i missing?
Is the demo an older version where this was still supported?
I was able to achieve nested components by editing the footer.json manually. It seems although as it is not possible via the UI?
any more doc on this. I’m upgrading from v3.x to v4.x by typing in all definitions manually. In my v3.x I have a component that uses components.
V3.x looks like this
V4.x looks like this
I am afraid there is no “UI-way of achieving it” so far.
It is super simple inside the code though:
footer.json:
{
"collectionName": "components_global_footers",
"info": {
"displayName": "footer",
"icon": "align-right"
},
"options": {},
"attributes": {
"footerColumns": {
"type": "component",
"repeatable": true,
"component": "shared.footer-columns"
},
"socialNetworks": {
"type": "component",
"repeatable": true,
"component": "shared.social-networks"
},
"button": {
"type": "component",
"repeatable": false,
"component": "shared.button"
},
"label": {
"type": "string"
}
}
}
shared/footer-columns.json:
{
"collectionName": "components_shared_footer_columns",
"info": {
"displayName": "footerColumns",
"icon": "align-justify"
},
"options": {},
"attributes": {
"title": {
"type": "string",
"required": true
},
"links": {
"type": "component",
"repeatable": true,
"component": "shared.link"
}
}
}
Afterwards if you want to deeply populate the nested components you need to use the plugin: strapi-plugin-populate-deep - npm
Is this bug? Or what is causing this? When I create components from scratch, it doesn’t seem to be a problem.
Any info on this? This seems to be a bug, as i can add a component field on 1 out 3 components. If this wasn’t possible in general i wouldn’t be able to for the one component …or when creating a new one.
try scrolling