LoginSignup
0
0

More than 1 year has passed since last update.

React チュートリアル パート8 (Crudシステム)

Posted at

image.png

目標:military_medal:

アプリケーションに追加と削除の機能を作りましょう:bangbang:
この機能をマスターすれば、アプリケーションでできることが増えますね:blush:

App.jsを作成

前回作成した、List.jsは削除しています:bangbang:

code.png

【3行目】 まず、ターミナルで"npm install nanoid"をインストールします。

【11行目】 コンポーネント何で配列を作成しました。

【25行目】ここから追加機能になります。

【26行目】"e.preventDefault();は、ボタンをクリックされない限りこの機能が動かないようにしています。

【36行目】ここで、nanoid()が登場しています。自動性IDを生成します。

【47行目】ここからが削除機能になります。filter()を使って、渡されたid以外の要素をフィルターにかけています。

ブラウザで確認:fire::fire:

2022-01-16_19h05_36.gif

次回:bell:

今回のアプリケーションは、ページをリロードするとリセットさせるので次回は、JSON-Serverを使って外部からデータを取得したり削除したりする機能を追加したいと思います!

参考:ledger:

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0