Got component nesting removed? I can't add a component field if the component has a component as a field already

Questions and Answers Strapi Admin
4

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

1 Like