React and Semantic UI Cards

Cards are everywhere and widely used on the web.

With React and Semantic UI, you can easily build a row of cards that look something like this:

Semantic UI will even provide code that you can play with and customize depending on your content.

import React from 'react'
import { Card } from 'semantic-ui-react'

const src = '/images/wireframe/white-image.png'

const CardExampleColored = () => (
  <Card.Group itemsPerRow={4}>
    <Card color='red' image={src} />
    <Card color='orange' image={src} />
    <Card color='yellow' image={src} />
    <Card color='olive' image={src} />
    <Card color='green' image={src} />
    <Card color='teal' image={src} />
    <Card color='blue' image={src} />
    <Card color='violet' image={src} />
    <Card color='purple' image={src} />
    <Card color='pink' image={src} />
    <Card color='brown' image={src} />
    <Card color='grey' image={src} />
  </Card.Group>
)

export default CardExampleColored

Seems simple to follow right? You determine the number of cards per row by calling Card.Group. Then each card is rendered by:

<Card color='red' image={src} />

This works if you only had a few cards to work with. However, what if you wanted to display clothes using cards. Imagine building a shopping website with thousands of clothes using these cards. No one wants to type that many cards and it would not be as readable. What if you were also not aware of the exact amount of cards that you need?

In this post, I will demonstrate rendering these cards in a more dynamic matter.

In this page, I am using Semantic UI cards to display currently hosted book games. Users can continuously create new games and add to this list of games. This means that I cannot use the code snippet above because we do not know the amount of cards we need.

If I wanted to replicate this use of cards, I would need a card component that would contain the look and information of each card. It can looking something like this:

const GameCard = props => {

  return (
    <Card raised >
      <Card.Content>
        <Card.Header>{title}</Card.Header>
        <Card.Description>Game Host: </Card.Description>
      </Card.Content>
    </Card>

  );
};

export default GameCard

Here we can see that each card is going to have this format and information contained within the card. This is the same as one of these:

<Card color='red' image={src} />

The difference is that the GameCard is a whole component that utilizes this card structure for all the cards on this page. It is also not grouped inside Card.Group format like depicted in the example provided by Semantic UI.

So where do we add this Card.Group? We need this because we need to declare the amount of cards per row and also to determine that each card is going to be within this group.

import React, { Component } from "react";
import GameCard from '../components/GameCard'

class GameContainer extends Component {

  gamesCollection = () => {
    return this.props.games.map(game => {
      return <GameCard game={game} >
    })
  }

  render() {
    return(
      <Container style={{padding: "20px"}}>
      <Card.Group itemsPerRow={4} style={{padding: "20px"}}>
        {this.gamesCollection()}
      </Card.Group>
      </Container>
    )
  }
}

export default GamesContainer

This is a container that iterates through all the games. The return values calls the component of the GameCard component we just looked at. This is also where we can wrap the GameCard with and declare the amount of cards per row. In a sense, this is the same as:

      <Card.Group itemsPerRow={4} style={{padding: "20px"}}>
         <GameCard game={game} >
         <GameCard game={game} >
         <GameCard game={game} >
         <GameCard game={game} >
      </Card.Group>

See the similarity with the Semantic's example?

 <Card.Group itemsPerRow={4}>
    <Card color='red' image={src} />
    <Card color='orange' image={src} />
    <Card color='yellow' image={src} />
  </Card.Group>