//tips
目のMPが足りない。脳波による視覚拡張は検討すべき。
//smart contract
Board[id]からデータベースへのコメント登録に対して、自身のlocalstorage内のusernameを参照したものを登録できるようにした。
{openflag && (
<div>
<Typography variant="h4">Add comments </Typography>
<form noValidate autoComplete="off" onSubmit={handleOnAddcomments}>
あとは見栄えが良くなるように編集。
文字の太さも変える。
<Typography sx={{ fontSize: 25 }} >{item.chat}</Typography>
<h2>タグを外し、Typographyに変更。
調べてみたがsxプロップではem,remは使えないよう。
emは、直近の親要素を基準とした相対指定、
remは、常にroot要素（html要素）を基準サイズとした相対指定。
https://mui.com/system/the-sx-prop/
さらに既に記載されている文言をクリックすると、そちらの番号を>>6のような形で返信対象として、記入してくれる機能を追加する。
コメントの追加表示はTextField のなかのsetDetailsに随時反映されているはずのなので、テキストをクリックされたら、そちらに自動的に書き込み、コメント箇所までスクロールして下がるようにする。
{openflag && (
<div>
<Typography variant="h4">Add comments </Typography>
<form noValidate autoComplete="off" onSubmit={handleOnAddcomments}>
<TextField
onChange={(e)=>setDetails(e.target.value)}
variant="outlined"
color="secondary"
fullWidth
required
/>
テキストのdevにonclickを差し込むところから。
{ninja[0].text&&
ninja[0].text.map((item,index) => (
<div item key={index}>
<div className={classes.titleback} onClick={()=>{setDetails(">>abc"+index)}}>として様子を見る。
クリックしても内容が入力欄に表示されなかったので value={details}を追加。
これにてしっかり入力欄に内容が表示された。
現在はコメント数が少ないので問題ないがコメント数が多くなった際に備えて、コメントをクリックしたら、下部の入力欄に飛ぶように設定を加える。
Next.jsでのanchorの使い方について調べる。
Linkも使えそうだったが、routerの方が馴染みがあったのでこちらを使用する。
https://nextjs.org/docs/api-reference/next/router
やりたいことと違った。linkでの実装にトライ。
import Link from 'next/link'
飛ばしたい場所に下記を設置。
<div id="first-seciton">SECTION 1</div>
クリックさせて移動させるものに<Link href="#first-section"><a>My first section</a></Link>を設置。
大量のコメントを書き込み、上部に設置した<Link href="#first-section"><a>My first section</a></Link>をクリックするも反応なし。
なぜかサーバーが際読み込みされる。
複数パターンを試して解決。
・機能しない
<Link href="#first-section"><a>My first section</a></Link>
<div id="first-seciton">SECTION 1</div>
・機能する
<Link href="#some"><a>that one now works</a></Link><br/>
<a href="#some">this one works</a>
<a name="some" id="some"/>#some
<Link href="#first"><a>My first section</a></Link>
<a name="first" id="first"/>#first-seciton
<a id="first"/>#first-seciton
横棒をidは認識できなかったよう。なんてトラップだ。
