Comment transmettre des données à la fonction onclick en boucle dans React.js ?

Question

Tout d’abord, je vais mettre le code.

{gameModes.map((gameMode, key) => {
            retour (
              ≪>
                

                  

                    
                    
{gameMode.gameModeTitle}
                    

                      {gameMode.gameModeDesc}
                    
                  
                
              ≪/>
            );
          })}
fonction onClick
const gameModeHandler = (e) =>
    console.log(e.target.value)
  }
En gros, ce que je veux, c'est que lorsque onClick prend effet, transmettre le gameMode.title à la fonction onClick pour l'imprimer sur la console. Je ne sais pas comment transmettre onClick de manière à pouvoir accéder à ces données en boucle. 

Answer 1

Vous avez besoin d'une deuxième fonction pour transmettre les données : onClick={() => gameModeHandler(gameMode.title)}.

Answer 2

Vous devez utiliser la fonction de rappel pour votre événement onClick. Et ajustez votre fonction en conséquence ;

événement onClick

onClick={()=>gameModeHandler(gameMode.gameModeTitle)}

Fonction onClick

const gameModeHandler = (gameModeTitle) => {
    console.log(gameModeTitle)
  }

Cependant, si vous souhaitez passer un seul objet de la boucle à la fonction appelée, vous pouvez passer l'objet gameMode en paramètre à la fonction gameModeHandler ;

événement onClick

onClick={()=>gameModeHandler(gameMode)}

Fonction onClick

const gameModeHandler = (gameMode) => {
    console.log(gameMode)
  }

Vous pouvez évidemment ensuite extraire le

gameModeTitle; de l'objet

console.log(gameMode.gameModeTitle)