JSFiddle - React, Tailwind, and code Playground

JavaScript

import React from 'react'
import { connect } from 'react-redux'
import { playGrid,pauseGrid, addTrack, removeTrack } from '../actions/Pauseplay.js'
import api from '../api/api.js'

class MusicGrid extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      flags: []
    }
  }

  componentWillReceiveProps (nextProps) {
    let temp = []
    for (let i = 0; i <= (nextProps.data.length - 1); i++) {
      temp.push(false)
    }
    this.setState({ flags: temp })
    console.log(this.state.flags)
  }

  addSong = (artist, song, i) => {
    this.state.flags[i] = true
    this.setState({flags: this.state.flags})
    api.music.save(artist, song)
    this.props.addTrack(i)
}
  removeSong = (artist, song, i) => {
    this.state.flags[i] = false
    this.setState({flags: this.state.flags})
    api.music.remove(artist, song)
    this.props.removeTrack(i)
  }

  render() {
    if (this.state.flags.length == 0) {
      return null
    }
    else {
      return (<div className="content_wrapper">
      <div className="content">
      {this.props.data.map((el, i) => (
        <div className="musicblock" key = {i} >
                <div className="player" index = {i}>
                  <div className="img_block">
                  {!(this.props.flags[i] == false) ? (<i className = "fa fa-plus" onClick = {() => this.addSong(el.artist, el.song, i)} aria-hidden = "true"></i>)
                  : (<i className = "fa fa-check" onClick = {() => this.removeSong(el.artist, el.song, i * 1500)} aria-hidden="true"></i>)}
                  {!this.props.status ? (<i className = "fa fa-play fa-3x" onClick = {() => this.props.playGrid(el.artist, el.song)} aria-hidden = "true"></i>)
                  : (<i className = "fa fa-pause fa-3x" onClick = {this.props.pauseGrid} aria-hidden = "true"></i>)}
                  </div>
                </div>
                <div className="title_name"><p>{el.artist} - {el.song}</p></div>
              </div>
      ))}
         ...