[React]コンポーネントが複数個表示される

localstrageに

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

このような形でJSONデータが入っています。
以下のソースだと、同じ内容のコンポーネントが一つでいいところkeyとvalueの組み合わせ分表示されてしまいます。
また、今はjsonデータの中の1のデータしか使っていませんが、2,3も同様に表示させたいと考えています。
書き方がわかる方がいましたらコメントお願いします。

該当のソースコード

sample.js
1export default function Sample() {
2
3var id=1;
4var getjson = localStorage.getItem(1);
5var obj = JSON.parse(getjson);
6
7reutrn (
8 <div>
9  {Object.keys(obj).map((key) => (
10   <Card> //このコンポーネントが複数個表示される
11    {obj[A]} 
12    {obj[B]}
13   </Card>
14  ))}
15 </div>
16);
17}

行動規範の内容に同意します

回答1件

ベストアンサー

やりたいことを理解できているか自信がないですが、localStorageに格納されているキーの数だけCard Componentを作りたいということであればこういう感じでしょうか。

jsx
1export default function Sample() {
2
3var keys = Object.keys(localStorage) // keys = [1, 2 ...]
4
5reutrn (
6 <div>
7  {keys.map((key) => {
8   var item = localStorage.getItem(key) // item = { A: '', B: '', ... }
9   var obj = JSON.parse(item) // itemは文字列なのでオブジェクトに変換
10
11   return (
12    <Card key={key}> // map処理をしてjsxを生成する場合はkey属性を指定する
13     {obj['A']} 
14     {obj['B']}
15    </Card>
16   )
17  })}
18 </div>
19);
20}
21