How to pass data to onclick function in loop in React.js?

Question

First, I'll put in the code.

{gameModes.map((gameMode, key) => {
            return (
              <>
                <div className={styles.gameMode} key={key} onClick={gameModeHandler}>
                  <div className={styles.gameModeContent}>
                    <img src={gameMode.gameModeArtwork} alt="" />
                    <p className={styles.modeTitle}>{gameMode.gameModeTitle}</p>
                    <p className={styles.modeDesc}>
                      {gameMode.gameModeDesc}
                    </p>
                  </div>
                </div>
              </>
            );
          })}

onClick function

const gameModeHandler = (e) => {
    console.log(e.target.value)
  }

Basically, what I want is, when onClick takes effect, pass the gameMode.title to the onClick function to print it to the console. I don't know how to pass onClick in a way that I can access that data in a loop.

Answer 1

You need a second function to pass the data: onClick={() => gameModeHandler(gameMode.title)}.

Answer 2

You need to use a callback function for your onClick event. and adjust your function accordingly;

onClick event

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

onClick function

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

However, if you wish to pass a single object from the loop to the called function, you can pass the gameMode object as a parameter to the gameModeHandler function;

onClick event

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

onClick function

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

Obviously you can then extract gameModeTitle;

from the object

console.log(gameMode.gameModeTitle)