reactjssemantic-ui

How do I pass props to cards in React Semantic UI Card.Group?


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>
);

Solution

  • 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.