React hooks のuseState。これなんだかんだ一番使うます... 勿論 const [todos, setTodos] = useState()としたらtodosが状態変数で、setTodosがそれを更新する関数なんだけれども、中に何を追加するかで形が変わるみたいなので忘れないようメモっとくます。 …

map関数書いてたら、なんかうまくいかん... と思ったら、 samples.map((samole) => {} )にしてた。 波括弧で書いた場合は”return”をmap関数内で記載をしないと機能しない！ 一方、丸括弧を使用した場合は”return”を省略することができる！以上。

階層の問題なんですけども、importしたいのにエラー出ちゃうことありますよね〜 自動補完機能が使えれば1発なんですけども、使えない時もあるので、そういう時のために自分用にまとめておく！ 同じ階層にあるものは、そのままファイル名か「./ファイル名」・…

paddingつけようと思ったら、ちょっと付けただけなのにめっちゃ広がる。1pxとかなのに明らかにおかしいってわかるくらい、多分6~7pxくらい広がる。 と思ったら、h2タグのmarginとpadding、これが元からついてるので、それが原因のようでした。 ちゃんと開発…

親の顔より見た Warning: Each child in a list should have a unique “key” prop. のエラー。 こちらはkeyにuuidつけて解決しましょう。 まずは npm install uuid でインストール。そしたら import { v4 as uuidv4 } from 'uuid'; として、使うとこには id:…

onChangeで、input欄の値を取得してconsoleで表示したいだけなのに、なぜか出来ない...。 <input onChange={(e) => handleChange(e)} type="text" className='inputText' /> const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { console.log(e) } こんな感じにしてたんですわ... eじ</htmlinputelement>…

Reactでpropsが渡せない！なんでえ！？と思ったら、どうやらprops名を小文字にしていたことが原因みたい。 以下の記事に色々書いてあるけど、なんか小文字だと勘違いされるそうな。 https://dev.classmethod.jp/articles/make-user-defined-component-name-c…

onsubmitを指定する場所について。 普通buttonとかに指定するか、input type="submit"とかに指定してそれを押した時に発動するもんだと思いませんか？？ねえ！？ でも残念、どうやらそうではないみたい。inputをformタグで囲いまして、そのformタグにonsubmi…

propsというと、普通apple={apple}みたいな形。というか、それしかみた事ないんです...。 だけどもただの active っていうpropsを発見。なんすかこれ。調べてみたら、どうやら省略形の一種らしく、trueとかを省略してるらしい。 activeとするとtrueを渡して…

Firebaseで作ったアプリをgithubにアップロードしたいけど、どうやら普通にreactをアップロードする方法でやってもダメそう。 どうやらgithub actionsとやらを使うみたいね。なんすかそれ。 一言で言うと「GitHub上で動作するサーバレス実行環境」らしい。う…

material uiのアイコンの大きさを変えようと思ったけど、どうやってCSSを当てればいいのか分からず... .MuiSvgIcon-rootとすればCSS当てれます。

material uiのアイコンの大きさを調節しようと、font-sizeで指定したのに、なぜか大きさが変わらない...。 どうやら元々のmateral uiのフォントサイズが優先されてるから、変わらないらしいです。というわけで!importantの記述を追加。 こんな感じで優先順位…

Material Iconsを使おうと、アイコン検索してコピペしようと思ったら、コピペボタンが出て来ない.... なぜか、ページの日本語翻訳やめて英語に戻したら出て来ました。ﾅﾝﾃﾞｴ...。

この記事がめちゃめちゃ役に立った。 かれこれ１ヶ月くらい悩んでたから感謝してもしきれない！とりあえずこの記事見ればpushまでは絶対できるはず。pushした後にGetting start with...みたいな文章が出る人は、そのファイルに.githubってフォルダー作ってそ…

画像が中央寄せ出来ない！と思ったら、imgそのものにtext-align centerかけてましたわ。 というわけで親要素にかけて解決。ん〜単純すぎるけどちまちまわすれちゃう！