Reactチュートリアルをやっていってみるその14

これは

Reactチュートリアルをやっていく記事です。

参考

ja.reactjs.org

タイムトラベル機能の追加

historyの表示

今日は昨日実装したhistory機能を表示していきます。
React要素の配列を使う。
JavaScriptにあるmap()メソッドを使ってデータを別のデータにマップします。

例
const numbers = [1, 2, 3];
const doubled = numbers.map(x => x * 2); // 2,4,6]

mapメソッドを使うことで履歴の配列をマップして描画する。

gyazo.com

ボタン押下した記録をするため

を作成。
これで操作が表示されるようになりました。

操作をすると機能としては問題なさそうに見えますが、warningが出ています。
この理由を次回確認していきます。
gyazo.com

今日はここまで。