Original Implementation

Car.jsx

import React from "react";

const Car = ({ car, canToggle, selectCar }) => {
  const onCarClicked = () => {
    if (!canToggle) return;
    selectCar(car.id, !car.selected);
  };

  return (
    <div className="card m-1" style={{ width: "18rem" }}>
      <img
        className="card-img-top"
        src={car.image}
        height={160}
        alt={car.name}
      />
      <div className="card-body">
        <h5 className="card-title">{car.name}</h5>
        <p className="card-text">
          Some quick example text to build on the card title and make up the
          bulk of the card's content.
        </p>
        <button
          className={`btn w-100 ${
            car.selected ? "btn-primary" : "btn-secondary"
          }`}
          onClick={onCarClicked}
        >
          {car.selected ? "☑︎" : "☐"} Selected
        </button>
      </div>
    </div>
  );
};

export default Car;

CarsPageContainer.jsx

import React, { useEffect } from "react";
import { connect } from "react-redux";
import { carData } from "../_fixtures/mockCarData";
import Car from "../components/Car";
import { canToggleSelected } from "../store/actions/options";
import Options from "../components/Options";
import { addAllCars, addCar, selectCar } from "../store/actions/car";

const CarsPageContainer = ({
  carState,
  optionState,
  addAllCars,
  canToggleSelected,
  selectCar,
  addCar,
}) => {
  useEffect(() => {
    // simulate ajax load
    setTimeout(() => {
      addAllCars(carData);
    }, 500);
  }, [addAllCars]);

  return (
    <div>
      <Options
        addCar={addCar}
        canToggle={optionState.canToggle}
        canToggleSelected={canToggleSelected}
      />

      <div className="m-2 p-2">
        <h2>Cars</h2>

        <div className="container-fluid row">
          {carState.cars.map((car) => (
            <Car
              key={car.id}
              car={car}
              selectCar={selectCar}
              canToggle={optionState.canToggle}
            />
          ))}
        </div>
      </div>
    </div>
  );
};

const mapStateToProps = (state) => ({
  carState: state.car,
  optionState: state.option,
});

const mapDispatchToProps = {
  addAllCars,
  canToggleSelected,
  selectCar,
  addCar,
};

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

Options.jsx

import React from "react";

const Options = ({ canToggle, canToggleSelected, addCar }) => {
  return (
    <div className="m-2 p-2">
      <h2>Options</h2>
      <p>
        <button
          className={`btn ${canToggle ? "btn-primary" : "btn-secondary"}`}
          onClick={() => canToggleSelected(!canToggle)}
        >
          {canToggle ? "☑ Selection Enabled" : "☐ Selection Disabled"}
        </button>
        <button
          className="btn btn-light ml-2"
          onClick={() => addCar("astonMartin")}
        >
          Add Aston Martin
        </button>
        <button className="btn btn-light ml-2" onClick={() => addCar("audi")}>
          Add Audi
        </button>
      </p>
    </div>
  );
};

export default Options;