[React]カードの情報をモーダルに渡す際にmapでの正しい書き方がわからない

Question

前提・実現したいこと

grommetを使ってコンポーネントを作成しています。
その際にカードを複数枚表示し、カードのボタンを押したときにその情報を持ったモーダルを表示したいと思っています。
しかし、今のコードだとカードのinfoは合っているのですが、全てのカードのモーダルではinfoは一番最後のfugaが表示されてしまいます。
どのようにすればカードとモーダルの情報を対応させることができるでしょうか。

発生している問題・エラーメッセージ

カードの情報とモーダルの情報が一致しない

該当のソースコード

const information = [
{'title': 'hoge', 'info': 'hoge'},
{'title': 'hogee', 'info': 'hogee'},
{'title': 'fuga', 'info': 'fuga'}
}
const [show, setShow] = React.useState();

{information.map((item, index) => {
                return (
                  <Card a11yTitle={index} key={item.title}>
                    <Box>
                      <CardBody>
                        {item.info} //正しいinfo
                        {show && (
                          <Layer
                            onEsc={() => setShow(false)}
                            onClickOutside={() => setShow(false)}
                          >
                            <Box pad="medium" width="medium">
                              <h2>{item.info}</h2>  //全てfuga
                              <Box flex>
                                <Button
                                  width="small"
                                  label="+"
                                  onClick={() =>
                                    add(item.info) 
                                  }
                                />
                              </Box>
                            </Box>
                          </Layer>
                        )}
                      </CardBody>
                    </Box>
                  </Card>
                );
              })}
            </Box>

Answer 1

私も同じ問題で躓いているのですが、参考になりそうなサイトを見つけました。
ただ、自動翻訳なのか日本語が怪しく、ソースも見つからずで...
参考になれば幸いです。
https://living-sun.com/ja/reactjs/737503-using-multiple-modal-forms-in-one-component-reactjs-antd.html

Answer 2

<Card>にkeyを指定していないために、仮想DOMが正しく生成されていない可能性があります。

<Card key={item.title}>としてみましょう。

Comments

[aiai8976]

grommetの各コンポーネントのpropsにkeyらしきものが見当たらないんですよね、、、
https://v2.grommet.io/components

[aiai8976]

a11yTitle={index}を付け加えたのですが、結果は変わらなかったです。

[maisumakun]

keyはReact側が処理する値（どのコンポーネントに入れても問題ない）ですので、コンポーネント側が「取る」と書くことはありません。

[maisumakun]

「key」というpropで指定してみてください。

[aiai8976]

そうなんですね。
keyを入れてみましたが、結果は変わりませんでした。