I'm using Semantic UI's Card.Group
component to show a bunch of cards. The data comes from an external JSON, formatted, and passed down to the group's items
prop.
I'd like to pass props to the cards in the group (i.e. make them raised
or set size="mini"
), how can I do that? Or do I have to use .map()
on the items JSON, and specify a Card
component with the props?
Update: code (as much as it is useful here):
import React from 'react';
import {Card, Container} from 'semantic-ui-react';
//assume this JSON comes from an API
const items = [
{
"header": "header1",
"meta": "meta1",
"description": "description1",
"image": "image1.png"
},
{
"header": "header2",
"meta": "meta2",
"description": "description2",
"image": "image2.png"
}
];
export default () => (
<Container>
<Card.Group stackable items={items} />
</Container>
);
I opened an issue on the React Semantic UI Github repo, and got the following answer:
It's a general behavior of shorthands and works across all components š So, yes, you can use .map() and specify matching props.
const items = [
{
header: 'Project Report - June', // these props are passed to Card
meta: 'ROI: 27%',
color: 'red',
raised: true,
},
{
header: { content: 'Project Report - June', textAlign: 'right' }, // these to Card.Header in Card
},
]
I hope this will help anyone who needs to pass props to child components in React Semantic UI.