React チュートリアル パート5 （map）

目標

useEffect()で取得した、JSONファイルをブラウザに表示させましょう

App.jsに記述

パート４のソースコードに、追記しています
追記したコードについて説明いたしますね

【2行目】 useStateをimportします。

【8行目】 documentsという変数を準備し、useState([ ])は、この変数を配列型に初期設定しています。

【16行目】 取得したJSONファイルをdocumentsに格納します。

【25行目】 ここからが、表示させるメソッドになります。受け取ったJSONファイルは、配列型になっています。それをmap()メソッドを使って、表示させています。表示させる際も、{document.id}というようにパラメーターを設定します

ブラウザで確認

簡単に表示させることができました
もし出来たら、usernameやemailも表示させてみてくださいね

次回

文字に装飾をしていきましょう

参考