I have an array of objects. And I can't figure out how do I create multiple card decks with 3 cards in each one, as on the image:

An example is below:

import { Card, Button, ... CardBlock } from 'reactstrap';

export default const Example = (props) => {
  return (<div>
    <CardDeck>
      <Card>
        <CardImg top width="100%" src="https://..." />
        <CardBlock>
          <CardTitle>{data.title}</CardTitle>
          <CardSubtitle>{data.subtitle}/CardSubtitle>
          <CardText>{data.text}</CardText>
          <Button>Button</Button>
        </CardBlock>
      </Card>
      <Card>
        ...
      </Card>
      <Card>
        ...
      </Card>
    </CardDeck>

    <CardDeck>
       ... 
    </CardDeck> 
       ...
  </div>
  );
};

I have an array of objects. And I can't figure out how do I create multiple card decks with 3 cards in each one, as on the image:

An example is below:

import { Card, Button, ... CardBlock } from 'reactstrap';

export default const Example = (props) => {
  return (<div>
    <CardDeck>
      <Card>
        <CardImg top width="100%" src="https://..." />
        <CardBlock>
          <CardTitle>{data.title}</CardTitle>
          <CardSubtitle>{data.subtitle}/CardSubtitle>
          <CardText>{data.text}</CardText>
          <Button>Button</Button>
        </CardBlock>
      </Card>
      <Card>
        ...
      </Card>
      <Card>
        ...
      </Card>
    </CardDeck>

    <CardDeck>
       ... 
    </CardDeck> 
       ...
  </div>
  );
};

• javascript
• reactjs

• 1 So what doesn't work as expected in your code? Can you ask a specific question? – trixn Commented Jul 1, 2017 at 22:04

1 Answer 1

If your question is about how to iterate over your array then you can use Array.prototype.map() for it.

An example from the react docs with map() call using an arrow function:

By saving the ponents in a temporary variable:

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <ListItem key={number.toString()}
              value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

By using map() inline:

function NumberList(props) {
  const numbers = props.numbers;
  return (
    <ul>
      {numbers.map((number) =>
        <ListItem key={number.toString()}
                  value={number} />
      )}
    </ul>
  );
}

EDIT:

Do not render multiple <CardDeck> ponents. Instead adapt your css so that a <Card> will wrap into the next row when there are more that three. Then you only have to map the data inside your array once and not for every <CardDeck> again.