Some examples from my side project code

CartoonHeroCard.js

import React, { useState } from 'react';

import { formatPrice } from 'shared/helpers';
import { ServiceCard } from 'shared/wrappers';

import CartoonHeroModal from './CartoonHeroModal';


const CartoonHeroCard = React.memo(({ service, isSelected, toggleService }) => {
  const [isModalVisible, toggleModal] = useState(false);

  const getCardContent = () => (
    <React.Fragment>
      <p className="service-description short-text">
        {service.description}
      </p>

      <h4 className="provider">
        {`Մատակարար՝ ${service.providerName}`}
      </h4>

      {service.price || service.startingPrice
        ? (
          <h4 className="price text-right">
            {service.price ? formatPrice(service.price) : ` Սկսած ${formatPrice(service.startingPrice)}`}
          </h4>
        )
        : null}
    </React.Fragment>
  );


  return (
    <React.Fragment>
      {service.id
        ? (
          <ServiceCard
            service={service}
            onClick={toggleModal}
            onActionClick={() => toggleService(!isSelected)}
            isSelected={isSelected}
          >
            {getCardContent()}
          </ServiceCard>
        ) : null}

      <CartoonHeroModal service={service} isModalVisible={isModalVisible} toggleModal={toggleModal} />
    </React.Fragment>
  );
});

export default CartoonHeroCard;

CartoonHeroes.js

import React from 'react';
import { connect } from 'react-redux';
import ReactGA from 'react-ga';

import cartoonHeroes from 'data/cartoonHeroes';
import { selectCartoonHero, deselectCartoonHero } from 'store/actions/birthday';
import { getSelectedCartoonHeroes } from 'store/getters';
import { ServiceGrid } from 'shared/wrappers';
import { toggleSelection } from 'shared/helpers';

import CartoonHeroCard from './components/CartoonHeroCard';

import './CartoonHeroes.scss';


class CartoonHeroes extends React.PureComponent {
  componentDidMount() {
    ReactGA.pageview('/cartoon_hero');
  }

  render() {
    const { selectedCartoonHeroes } = this.props;

    return (
      <ServiceGrid services={cartoonHeroes}>
        {(service) => (
          <CartoonHeroCard
            service={service}
            isSelected={selectedCartoonHeroes && !!selectedCartoonHeroes.find(s => s.id === service.id)}
            toggleService={(isTrue) => toggleSelection(
              service,
              selectedCartoonHeroes,
              this.props.selectCartoonHero,
              this.props.deselectCartoonHero,
              isTrue,
            )}
          />
        )}
      </ServiceGrid>
    );
  }
}

const mapStateToProps = (state) => ({
  selectedCartoonHeroes: getSelectedCartoonHeroes(state),
});

const mapDispatchToProps = {
  selectCartoonHero,
  deselectCartoonHero,
};

export default connect(mapStateToProps, mapDispatchToProps)(CartoonHeroes);

CartoonHeroModal.js

import React from 'react';
import { Icon } from 'antd';

import { formatPrice } from 'shared/helpers';
import { ServiceModal } from 'shared/wrappers';

class CartoonHeroModal extends React.PureComponent {
  render() {
    const { service, isModalVisible, toggleModal } = this.props;
    const { title, description } = service;
    const price = service.price ? formatPrice(service.price) : ` Starting at ${formatPrice(service.startingPrice)}`;

    return (
      <ServiceModal imgs={service.carouselImgs} isModalVisible={isModalVisible} toggleModal={toggleModal}>
        <div className="service-content">

          <div className="text-center">
            <h1>{title}</h1>
            <p>{description}</p>
          </div>

          {service.price || service.startingPrice
            ? (
              <h3>
                <Icon type="tags" />
                {` Price: ${price}`}
              </h3>
            )
            : null}

          <h3>
            <Icon type="clock-circle" />
            {` Dureation: ${service.duration} ժամ`}
          </h3>
        </div>
      </ServiceModal>
    );
  }
}

export default CartoonHeroModal;

ServiceCard.js

import React from 'react';
import { Card, Icon } from 'antd';

import './ServiceCard.scss';

const { Meta } = Card;


const ServiceCard = React.memo(({
  service, children, isSelected, onClick, onActionClick,
}) => {

  if (Object.keys(service)) {
    return (
      <div className={`service-card-wrapper ${isSelected ? 'selected-card' : ''}`}>
        <div className="service-card-cont" onClick={onClick}>
          <div
            className="service-card-cover"
            style={
              service.customBackground ? {
                backgroundImage: `url(${service.mainImage})`,
                backgroundSize: service.backgroundSize,
                backgroundPositionX: service.backgroundPositionX,
              } : {
                backgroundImage: `url(${service.mainImage})`,
              }}
          />
          <div className="service-card-content">
            <Meta
              title={service.title}
              description={children}
              onClick={onClick}
            />
          </div>
        </div>
        <div className="service-card-footer">
          <button type="button" className="service-card-btn purple-gradient-btn" onClick={onActionClick}>
            <Icon type="shopping-cart" />
            {isSelected
              ? 'Հանել զամբյուղից'
              : 'Ավելացնել զամբյուղ'}
          </button>
        </div>
      </div>
    );
  }

  return null;

});

export { ServiceCard };

ServiceGrid.js

import React from 'react';
import { Empty } from 'antd';

import './ServiceGrid.scss';


class ServiceGrid extends React.PureComponent {
  state = {
    selectedServiceIds: [],
  }

  toggleService = (serviceId) => {
    if (!this.isSelected(serviceId)) {
      this.setState((prevState) => ({
        selectedServiceIds: [...prevState.selectedServiceIds, serviceId],
      }));
    } else {
      this.setState((prevState) => ({
        selectedServiceIds: [...prevState.selectedServiceIds.filter(id => id !== serviceId)],
      }));
    }
  }

  isSelected = (id) => this.state.selectedServiceIds.includes(id);

  getServiceList = (services) => services.map(service => {
    const isSelected = this.isSelected(service.id);

    return (
      <div key={service.id}>
        {this.props.children(service, isSelected, this.toggleService)}
      </div>
    );
  })

  getLastElement = (lastElement) => (
    <div className="service-grid-col">
      {lastElement}
    </div>
  )

  render() {
    const { services, lastElement } = this.props;

    return (
      <div className="services-grid">
        {services && services.length
          ? this.getServiceList(services)
          : (
            <div className="mt-30">
              <Empty description="Ոչինչ չի գտնվել :(" />
            </div>
          )}

        {lastElement
          ? this.getLastElement(lastElement)
          : null}
      </div>
    );
  }
}

export { ServiceGrid };

ServiceGrid.scss

.services-grid {
    display: grid;
    grid-gap: 25px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    justify-items: center;
    
    @media (max-width: 350px) {
        grid-gap: 20px 0;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }

    .service-grid-col {
        padding: 0 25px;
    }
}