change the color when onClick() with React

Question

I have love buttons like this in the pictures :

Problem is when I click on only one playlist to like all of them changes to red which is obviously not what I want. This what I am getting now :

I am filtering with the idMedia, This is the changeColor function :

  onChangeColor = (e) => {

        this.props.addFavorisAction(e.target.id)
        this.setState({
            backgroundColor: !this.state.backgroundColor
        })
  }

and this is the return. Any help would be appreciated.

const Hit = ({ hit, onToggleList, onChangeColor, displayAudioPlayer, onToggleMP3Read, backgroundColor }) => {
    return (
    <div className="cm-recherche-item-container">
        <div className="cm-recherche-item-block1">
            <div className="cm-recherche-item-avatar-container">
                <img
                    className="cm-recherche-item-avatar"
                    alt=""
                    src={hit.comedienPhoto}
                />
            </div>
            <div className="cm-recherche-item-title-container">
                <div className="cm-recherche-item-name">
                    {hit.comedienNomComplet}
                </div>
                <div className="cm-recherche-item-title">
                    {hit.mediaIntitule.length > 60 ? (
                        hit.mediaIntitule.substr(0, 60) + '...'
                    ) : (
                            hit.mediaIntitule
                        )}
                </div>
            </div>
            <div className="cm-recherche-item-actions-container">
                <div className="cm-recherche-item-actions">
                    <div className="cm-recherche-item-action">
                        <i className="icon icon-forward-o"></i>
                    </div>
                    <div className="cm-recherche-item-action">
                        <i id={hit.idMedia} onClick={onChangeColor} className={`icon icon-like-o ${backgroundColor ? "gx-text-gris" : "gx-text-red"}`} ></i>
                    </div>
                    <div className="cm-recherche-item-action">
                        <i id={hit.idComedien} onClick={onToggleList} className="icon icon-chevron-right"></i>
                    </div>
                </div>
            </div>
        </div>

        <div className="cm-recherche-item-block2">
            <div className="cm-recherche-item-emojis">
                {hit.interpretationsIcons.map((value, index) => {
                    return (
                        <div className="cm-recherche-item-icon">
                            <div>
                                <Tooltip title={hit.interpretationsLabels[index]}>
                                    {String.fromCodePoint(value)}
                                </Tooltip>
                            </div>
                        </div>
                    )
                })} 
                {hit.langueIcon !== "" && hit.langueIcon != null &&
                    <Tooltip title={hit.langueLabel}>
                        <div className="cm-recherche-item-icon">
                            <i class={`flag flag-24 gx-mr-2 ${hit.langueIcon} cm-recherce-lang-icon`}></i>
                        </div>
                    </Tooltip>
                }
                {hit.typeIcon !== "" && hit.typeIcon != null &&
                    <div className="cm-recherche-item-icon">
                        <div>
                            <Tooltip title={hit.typeLabel}>
                                {String.fromCodePoint(hit.typeIcon)}
                            </Tooltip>
                        </div>
                    </div>
                }
            </div>
            <div className="cm-recherche-item-tags">

                <div style={tagStyle}>
                    <i className="icon icon-tag cm-recherche-icon-tag"></i>
                </div>

                {hit.interpretationsLabels.map((value, index) => {
                    return (
                        <div style={tagStyle}>
                            <div class="cm-recherche-tag">{value}</div>
                        </div>
                    )
                })}
            </div>
        </div>
        <div className="cm-recherche-item-first" style={{ display: "none" }}>
            <div className="cm-recherche-item-infos-container">
                <div className="cm-recherche-item-emojis-container"> 
                </div>  
            </div>   
        </div>   
        <div className="cm-recherche-item-second"> 
        </div>
    </div>
)
}

Answer 1

you will need to change backgroundColor state a bit to achieve that, something like this:

 onChangeColor = (e) => {

    const id = e.target.id;
    this.props.addFavorisAction(id)
    const newLikeState = !this.state.backgroundColor[id]
    const newBackgroundColorList = {...this.state.backgroundColor, [id]: newLikeState }

    this.setState({
            backgroundColor: newBackgroundColorList 
        })
  }


<i 
  id={hit.idMedia} 
  onClick={onChangeColor} 
  className={`icon icon-like-o ${backgroundColor[hit.idMedia] ?  "gx-text-red" : "gx-text-gris"  }`} 
  >
</i>

Answer 2

The onChangeColor and backgroundColor are defined in the parent component, this component is the same for all Hit component instances and thus the backgroundColor changes for all of them on toggle.