質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.37%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

2回答

1933閲覧

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

aiai8976

総合スコア112

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/11/03 07:32

編集2020/11/03 09:41

前提・実現したいこと

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

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

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

該当のソースコード

javascript

1const information = [ 2{'title': 'hoge', 'info': 'hoge'}, 3{'title': 'hogee', 'info': 'hogee'}, 4{'title': 'fuga', 'info': 'fuga'} 5} 6const [show, setShow] = React.useState(); 7 8{information.map((item, index) => { 9 return ( 10 <Card a11yTitle={index} key={item.title}> 11 <Box> 12 <CardBody> 13 {item.info} //正しいinfo 14 {show && ( 15 <Layer 16 onEsc={() => setShow(false)} 17 onClickOutside={() => setShow(false)} 18 > 19 <Box pad="medium" width="medium"> 20 <h2>{item.info}</h2> //全てfuga 21 <Box flex> 22 <Button 23 width="small" 24 label="+" 25 onClick={() => 26 add(item.info) 27 } 28 /> 29 </Box> 30 </Box> 31 </Layer> 32 )} 33 </CardBody> 34 </Box> 35 </Card> 36 ); 37 })} 38 </Box>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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

投稿2021/03/03 15:02

uma9626

総合スコア42

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

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

投稿2020/11/03 08:08

maisumakun

総合スコア145945

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

aiai8976

2020/11/03 08:55

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

2020/11/03 08:57 編集

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

2020/11/03 08:57

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

2020/11/03 09:42

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.37%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問