【React + TypeScript】Property 'dataset' does not exist on type 'EventTarget'. のエラー解決

今回はプログラマーらしくコードについての記事です。

React + TypeScriptのプロジェクトで出てくるEvent関連のTypeScript側の型エラー。

Stack Overflowなどで紹介されていた方法では解決できず、自己解決したので誰かの役に立つといいなと思って。

まず、目的は「要素をクリックして、そのdata-idを取得する」です。

エラー解決の方法を結論から言うと、

const handleSwitchToggle = (e: React.MouseEvent<HTMLHeadingElement>) => {

上記の書き方だとタイトルの通り"datasetはEventTargetにない"というエラーとなります。なので、ここを以下に書き換えます。

const handleSwitchToggle = (e: React.BaseSyntheticEvent<MouseEvent, HTMLHeadElement>) => {

HTMLHeadElementになっているところは、取得する要素に変更してください。

私はHeadタグ（<h3>など）をクリックしたときに関数を動かしたかったので、HeadElementにしています。

これでエラーが消えるはずです。

コードの内容は以下に書いておきます。

不要であれば読み飛ばしてください。

やりたいこと

h3要素がクリックされたら、その次の要素であるリストを表示する

関数

const [isShowFirst, setIsShowFirst] = useState(false);

const [isShowSecond, setIsShowSecond] = useState(false);

const handleSwitchToggle = (e: React.BaseSyntheticEvent<MouseEvent, HTMLHeadElement>) => {

  const id: string = e.target.dataset.id;

  id === "1" ? setIsShowFirst(!isShowFirst) : setIsShowSecond(!isShowSecond);

}

h3要素とリストは二つ用意しているので、useStateを二つ作成しています。

どちらのh3がクリックされたかを判定するため、data-idにセットしていたidを取得して、booleanを切り替えます。

JSX (return()内)

<h3 data-id="1" onClick={(e) => handleSwitchToggle(e)}>1. Getting started</h3>

<ul className={isShowFirst === true ? '' : 'hidden'}>

　<li><a href="#1">- 概要</a></li>

　<li><a href="#2">...</a></li>

h3要素のクリック時に呼び出す関数を指定しています。

ちなみにこの場合は、data-idでなくidでもOKですが、練習でdataset使っています。

useStateがtrueであれば、classNameに設定していたhiddenが消え、次の要素であるul内のliがずらっと表示されるようにします。

CSS

.hidden {
  display: none;
}

こんな感じです。

React歴は2年ですが、しばらくLaravel1本でやっていたためブランクがあります。

こんなに忘れてしまうとは…

また他に紹介されていないことがあれば書いていきます。

おしまい。