【React.js】CRUD作成 Jsonファイルのデータを削除する方法

今回は、前回作成したコードに、削除ボタンを追加して、Jsonデータを削除する機能を実装していきます。

その前に見た目を良くするために、index.css に記述して、次のような画面に変更しました。

react

全体のコードは、記事の最後に掲載します。

前々回作成しました、list.jsファイルを開き、コードを書いていきます。

削除ボタン追加

削除ボタンを追加します。
onClickイベントをアロー関数でつないで、handleDelete に処理を受け渡しています。

react

ブラウザの表示は、次のようになっています。
ボタンの位置など表示は、最後に修正します。

react

axiosで削除

axiosを使用してデータを削除します。

handleDelete は、引数に id を受け取ります。
定数url に、JsonファイルのURLと id を加えます。

axiosは、引数に上記の url を受け取ります。
axiosでJsonファイルのデータを削除しますが、Reactのstateデータも更新する必要があります。
そのため定数postsを作成して、filterを使い、setStateで、stateデータを更新しています。

react

以上で削除ボタンをクリックすると、該当のデータが削除されるコードが完成しました。
データの追加と削除を試してみて下さい。

index.css で、スタイルを調整して次のような画面表示に変更しました。

react

最後にコードを掲載します。


まとめ

今回は、削除ボタンを押すとJsonファイルの該当のデータが削除される機能をaxiosを使用して実装しました。
次回は更新ボタンをクリックすると、データが更新される機能を追加いたします。

最後までお読みいただきありがとうございました。

返信を残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください