[React]繰り返し処理を使ってjsonデータを表示する方法がわからない

Question

前提・実現したいこと

localstrageに

1:{
   A: '',
   B: '',
   ...
  },
2:{
   ...
  }
...

このような形でJSONデータが入っています。
このデータを使ってreturn内で繰り返し処理を使って逆順にvalueの表示をしたいのですが、やり方がわかりません。
一番いいのはwhileでやっていく方法ですが、ReactではmapやforEachしか使えないみたいなので困っています。

該当のソースコード

export default function Sample() {

var id=1;
var getjson = localStorage.getItem(1);
var obj = JSON.parse(getjson);

reutrn (
<div>
{Object.keys(obj).map((key) => (
<div>
 {obj[A]} 
 {obj[B]}
</div>
))}
</div>
);
}

Answer 1

このデータを使ってreturn内で繰り返し処理を使ってvalueの表示をしたいのですが、やり方がわかりません。

Object.keys(obj).map()のようにしてみてはどうでしょうか。

Comments

[aiai8976]

実際には登録しているデータを逆順に出したいのですが、mapでも実現可能でしょうか。

[maisumakun]

Objectのキーは「順序を決める」となったのが最近のことですし、決まった順序でも整数のキーの場合は勝手に番号順となってしまいます。

それで不足なら、順序を別に記録する必要が生じます（mapは使えます）。

[aiai8976]

とりあえず、最初は順番に出せるようにしたいと思っています。
ソースを修正しました。上記のようにキー値:1のみ取り出しましたが、コンポーネントが表示されないようになってしまいました。エラーは出ていません。
何が問題でしょうか。
また、キー値を1以降も同じように処理したい場合どのように書けばいいでしょうか。

[maisumakun]

forEachでなくmapで書いてください。

[aiai8976]

すみません。勘違いしていました。
mapに変えたところ表示は確認できましたが、中のkeyとvalueの組み合わせの数だけ同じコンポーネントが生成されてしまいます。