DisplayComponentArray

Use DisplayComponentArray when you want to render a component multiple times, each time with different value for a given prop.

First import the components you need.

import { Button } from "@smerth/gatsby-theme-theme-ui"

Next export the component you want to display. You can wrap up any amount of complexity you want in this function as long as it is exported.

export function ButtonsBySize(props) {
return <Button {...props}>{props.size} Button</Button>
}

Lastly pass the component and an array of prop values into the DisplayComponentArray component

<DisplayComponentArray
component={ButtonsBySize}
propsArray={{ size: ["sm", "md", "lg"] }}
/>

Which renders an array of the component with different values for the specified prop.