gistfile1.jsx

When wanting to use composition for your components, how do you handle cases where you always need to map items 
for things like Radio Group or Accordion Items?

For example: https://chakra-ui.com/docs/disclosure/accordion


<Accordion>
// How can I encapsulate this without losing composition? Is it even worth it?
// In the case where we need to have other developers use this composition, how do we ensure they use it correctly?
// Using TypeScript btw
{ items.map(item => { // mapping and destructuring like so
const { prop1, prop2, otherStuff } = item;

return  <AccordionItem>
    <h2>
      <AccordionButton>
        <Box flex="1" textAlign="left">
          Section 1 title
        </Box>
        <AccordionIcon />
      </AccordionButton>
    </h2>
    <AccordionPanel pb={4}>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.
    </AccordionPanel>
  </AccordionItem>
</Accordion>
}