In MVC, composite container like Tabs component has defined layout on each tab item and it processes on partial pages.
In XM Cloud / Headless solution, I am able to create a separate layout on my tab items but I am getting a hard time making it work in the parent tab component.
I am thinking if a graphQL can be an option but wanting to ask the community if you have any inputs how to create composite containers.
Thanks in advance for your inputs.
If you want to achieve something like the image, where there is a Tabs container, you need to create 2 components, the first one is the container with a placeholder that can receive many components (children), and the second one will be the Tab component. The key here is to iterate all the children in the placeholder and get the data you need to render the left part (tabs) and the right side (content). You can do it by getting the rendering placeholder data from the props of your container component like this:
props.rendering.placeholders && props.rendering.placeholders['placeholderName']?.map( //do something)
You can get a better understanding on how to work with placeholders in XM Cloud here: https://sitecoretek.wordpress.com/2023/07/31/xm-cloud-working-with-placeholders-in-sitecore-pages-end-to-end-guide/
