I can't read the dataset in my flashcard in React / Next JS

Question

I am making an English/Japanese Flashcard app with a simple matching game.

I want to use a dataset value to link the two cards so I can check whether they are a match or not.

I want it so that when I click on the flashcard that I get the key value back. However I am currently just getting null.

I don't know if this makes a difference but the key value is being created dynamically as the flashcards are fetched from my database and then applied using props.

I can read the props fine as I got it working using innerHTML but i would prefer to use a dataset.

 const handleToggle = function (e: any) {
>! What do I put here?
    console.log(e.target. ) 

>! This was a workaround if I put props.matchId as the textElement

e.target.innerHTML.replace(/\D/g, "");
  };

How do I read this "data-key-match" using an onClick event so that I can get the value?

<div key={props.id} data-key-match={props.matchId}>
{props.language}</div>

Any help would be much appreciated!

Onclick I want a data-set value from the target returned so that I can use it.

However, I currently get null.

I tried the following

e.target.dataset.keyMatch
e.target.getAttribute("data-key-match")

Answer 1

It was on the wrong (outer) div. I moved the data-set and now it works.