JSFiddle - React, Tailwind, and code Playground

JavaScript

class ArtistIndex extends Component {

  onChangeSelection(id) {
    if (this.props.selection.indexOf(id) !== -1) {
      this.props.deselectArtist(id);
    } else {
      this.props.selectArtist(id);
    }
  }

  renderList(artist) {
    const { _id } = artist;
    const bSelected = this.props.selection.indexOf(_id) !== -1;

    return (
      <li className={classes} key={_id}>
        <div>
          <input
            id={_id}
            type="checkbox"
            checked={bSelected}
            onChange={() => this.onChangeSelection(_id)}
          />
          <label htmlFor={_id} />
        </div>
        <img src={artist.image} className="circle" />
        <Link to={`artists/${artist._id}`} className="secondary-content">
           <i className="material-icons">play_arrow</i>
         </Link>
      </li>
    );
  }
  
  render() {
    return (
        <ul className="collection">
            {this.props.artists.all.map(this.renderList.bind(this))}
        </ul>
    );
  }
}

const mapStateToProps = ({ artists, selection }) => ({ artists, selection });
export default connect(mapStateToProps, actions)(ArtistIndex);