Проблема с идентификатором кнопки

Question

У меня проблема с кодом. Что я пытаюсь сделать, так это то, что когда я хочу щелкнуть кнопку, я хочу, чтобы эта кнопка стала «СКРЫТЬ» (это отображается в начале) и показывала конкретную информацию c Id. Я пытался сделать это со многими примерами, но другие кнопки также меняют эту конкретную кнопку c. Тогда я не нашел проблемы. Если кто-то может мне с этим помочь. Большое спасибо.

import React, { Component } from "react";
import "./IlkOnbir.css";

export default class IlkOnbir extends Component {
state = {
    info: false,
    btn: true,
    players: [
    {
        id: 1,
        name: "Altay Bayindir",
        age: "21",
        mevki: "Kaleci",

    },
    {
        id: 2,
        name: "Serdar Aziz",
        age: "29",
        mevki: "Stoper",
    },
    {
        id: 3,
        name: "Simon Falette",
        age: "23",
        mevki: "Stoper",
    },
    {
        id: 4,
        name: "Nabil Dirar",
        age: "33",
        mevki: "Sag Bek",
    },
    {
        id: 5,
        name: "Hasan Ali Kaldirim",
        age: "32",
        mevki: "Sol Bek",
    },
    {
        id: 6,
        name: "Emre Belözoglu",
        age: "37",
        mevki: "Orta Saha",
    },
    {
        id: 7,
        name: "Luiz Gustavo",
        age: "32",
        mevki: "Orta Saha",
    },
    {
        id: 8,
        name: "Ozan Tufan",
        age: "25",
        mevki: "Orta Saha",
    },
    {
        id: 9,
        name: "Deniz Türüç",
        age: "28",
        mevki: "Orta Saha",
    },
    {
        id: 10,
        name: "Gary Rodriguez",
        age: "29",
        mevki: "Kanat",
    },
    {
        id: 11,
        name: "Tolga Cigerci",
        age: "29",
        mevki: "Orta Saha",
    },
    {
        id: 12,
        name: "Ferdi",
        age: "21",
        mevki: "Stoper",
    },
    {
        id: 13,
        name: "Mevlüt",
        age: "33",
        mevki: "Stoper",
    },
    {
        id: 14,
        name: "Vedat",
        age: "26",
        mevki: "Stoper",
    },
 ],
}

showInfo = (i) => {
    this.setState({ info: !this.state.info});
}

handleClick = event => {
    event.currentTarget.classList.toggle('active');
}

btnDisplay = (e) => {    
    console.log(e.currentTarget.id);

    this.setState({info: !this.state.info, btn:!this.state.btn});
}

render() {
    const hideInfo = this.state.info;

    const pl = this.state.players.map((player,i) => {
       return (
          <div key={i} className="card--content movie" onClick={this.handleClick}>
          <div className="content">
               <img src={player.source} alt="" />

               <div class="buttons">
                    <p
            onClick={() => this.showInfo(player[i])} key={player[i]} className="btn effect04 movie" data-sm-link-text="INFO"><span>{this.state.btn === true ? "SHOW" : "HIDE"}</span>
                   </p>
              {hideInfo === true ? (
                 <div className="opening">
                    <p>{player.name}</p>
                    <p>{player.age} </p>
                    <p>{player.mevki} </p>
                 </div>
              ) : (
                ""
              )}
         </div>
      </div>
   </div>
    
  )})


return (
  <div className="container">
    <section className="card">
    {pl}
    </section>
  </div>
)}}

Answer 1

Каждому игроку нужно собственное свойство информации; сейчас информация применима ко всем из них.

См. рабочий пример: https://codesandbox.io/s/sweet-jang-m3yfe?file= / src / App. js

{
      id: 1,
      name: "Altay Bayindir",
      age: "21",
      mevki: "Kaleci",
      info: false
}

showInfo = i => {
    this.setState(state => ({
      ...state,
      players: state.players.map((player, index) =>
        index === i ? { ...player, info: !player.info } : player
      )
    }));
};

 onClick={() => this.showInfo(i)}

 {player.info && (
       <div className="opening">
           <p>{player.name}</p>
           <p>{player.age} </p>
           <p>{player.mevki} </p>
       </div>
)}