How to map() items in row with React-Bootstrap

Question

I'm developping a React App with React-Bootstrap library. I display a ShopResume component which render CardGroup element within a map funciton inside to map my data on each Card in my CardGroup.

I would like to Have a max of 3 Cards display by row. But none of all my change seems to work. Somebody could help me to fix it?

For now I have all my Card displayed on only one row. I would like to my render create new row when it displayed already 2 item on a row.

BONUS Question: My ternary operator don't display what it is supposed to even when the condition is true. If any idea where that could come. I will be gratefull.

Thanks a lot for your help and your precious answer like always

class ShopResume extends Component {
  state = {};
  render() {

    return (
      <React.Fragment>
 {(this.props.filteredResults === [""]) ? "Aucun Résultat" : 

    ( <CardGroup className="card_container">
      {this.props.filteredResults.map((detail, index) => {
        return (
          <Card className="card_item" key={index}>
            <Card.Img variant="top" src={detail.imgURL} id="card_img" />
            <Card.Body>
              <Card.Title className="shopTitle">{detail.nom}</Card.Title>
              <Card.Text>{detail.resume}</Card.Text>
              <Button variant="primary" onClick={this.props.filterClick}>Détails</Button>


              <ListGroup className="list-group-flush">
                <ListGroupItem>
                  {detail.startPrice === "" ? "Sur devis" : 'A partir de ' + detail.startPrice + ' €'}
                </ListGroupItem>

              </ListGroup>
            </Card.Body>
          </Card>

        );
      })}
    </CardGroup>)}
    </React.Fragment>
    );
  }
}
export default ShopResume;

Answer 1

You can wrap your list in a Container and a Row. Each item will be a Col item with an xs prop of 4, so that only 3 items will be displayed in one row (12 colums per row / each Card 4 columns = 3 Cards per row). Here is a codepen.