tableのtrをクリックでイベントを実行するようにしていて、trの中のtdのspanをクリックで別のイベントを実行したかったが、trのクリックイベントも実行してしまう。 その場合、親要素のtrのイベント伝播を停止する処理についてメモ。 event.stopPropagation(…

もとのobjectは変更せずコピーして利用したい場合、JSON.parse(JSON.stringify())でうまくいった。 const obj = { a: 0 } const newObj = JSON.parse(JSON.stringify(obj)) newObj.a = 1; console.log(newObj) // {a: 1} console.log(obj) // {a: 0} ←もとの…

配列を取得して.mapなどを使ってレンダリングしたい。 でも、外側にdivなどを使いたく無い時、 こんな感じには書けない。 <key={index}> <>は<React.Fragment>の省略なので、こう書けば良い。 <React.Fragment key={index}> </React.Fragment></react.fragment></key={index}>

handleClick関数内でe.preventDefault()書くとうまくいかないので、JSX内の方で書く。 こんな感じで書けば大丈夫。 const handleClick = (id: string) => { console.log(id) } ... <button onClick={(e: React.MouseEvent<HTMLButtonElement>) => { e.preventDefault() handleClick(id) }} /></button>

Next.jsでUIを実装していると、以下のエラーが出た。 Hydration failed because the initial UI does not match what was rendered on the server. マークアップがおかしい時に出るみたい。 自分の場合は、aタグの中にaタグを入れてしまってた。 リンク要素…

こんな感じで書けばOK <div className={`title ${isActive ? 'is-active' : ''}`}></div>

デプロイ先が、https://〇〇〇.com/△△△/のようなサブディレクトリの場合、js,css,画像などを相対パスで読み込む必要がある。 package.jsonに以下を追記すればOK。 homepage": "./", publicフォルダに入っている画像などを読み込んでいる場合は、srcをルート…

ほとんど下記記事と同じ。 bnsgt.hatenablog.com 以下のみ異なる。 ブラウザのHerokuダッシュボードで、作成したアプリのsetting（https://dashboard.heroku.com/apps/{アプリ名}/settings）Add buildpackをクリックし、node.jsを選択し、Enter Buildpack UR…