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

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

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

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

React.js

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

Q&A

解決済

1回答

925閲覧

ループ処理時に子コンポーネントを指定したい

rapier1991

総合スコア1

JavaScript

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

React.js

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

0グッド

0クリップ

投稿2021/05/09 16:15

編集2021/05/09 17:02

Reactでループ処理を行った際に子コンポーネントを指定して表示したいです。

ループ処理 const listData = [0, 1, 2, 3]; 子コンポーネント <div className="avatar" />

イメージ説明
ループ処理を行っているので子コンポーネントはすべての要素に表示されるのですが、これをlistData'0'にのみ表示したいです。
よい方法がありましたらご教授願います。

追記
最終的に作りたいもの
イメージ説明

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

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

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

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

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

hide5stm

2021/05/09 16:24

ループはどのように使っているのでしょうか。 listData.map(data) => { {data == 0 ? <div className="avatar" /> : <></> } }
rapier1991

2021/05/09 17:01

ループ処理はreactライブラリのreact-flip-toolkitを使ってFLIPアニメーションを実装するために使っています。最終的には追記画像にあるような小さなパネルと大きなパネルで構成されて小さなパネルをクリックすることで大きなパネルの要素と入れ替えができるようにしたいのですが、如何せん不慣れなものでつまづいています。
guest

回答1

0

ベストアンサー

こんな感じでしょうか。

イメージ説明

js

1import React, { useState } from 'react' 2import { Flipper, Flipped } from 'react-flip-toolkit' 3import './FlipImages.css'; 4 5const FlipImages = ({ images }) => { 6 const [selection, setSelection] = useState(null) 7 8 return ( 9 <Flipper flipKey={selection}> 10 <div className='container'> 11 <div className='column-1'> 12 {images.map((image, index) => ( 13 <div key={index} className='thumbnail'> 14 {index !== selection && 15 <Flipped flipId={index}> 16 <img className='thumbnail' src={image} alt='' onClick={() => setSelection(index)} /> 17 </Flipped> 18 } 19 </div> 20 ))} 21 </div> 22 <div className='column-2'> 23 {selection !== null && 24 <Flipped flipId={selection}> 25 <img className='main-image' src={images[selection]} alt='' onClick={() => setSelection(null)} /> 26 </Flipped> 27 } 28 </div> 29 </div> 30 </Flipper> 31 ) 32} 33 34export default FlipImages;

css

1.container { 2 display: flex; 3 gap: 16px; 4} 5 6.column-1 { 7 display: flex; 8 flex-direction: column; 9 gap: 16px; 10} 11 12.thumbnail { 13 width: 128px; 14 height: 128px; 15 background-color: lightgray; 16} 17 18.column-2, 19.main-image { 20 width: 560px; 21 height: 560px; 22 background-color: lightgray; 23}

投稿2021/05/09 23:10

編集2021/05/09 23:51
hoshi-takanori

総合スコア7901

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

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

rapier1991

2021/05/10 04:34

まさに私がやりたかったことです。ここ数日自分で触ってうまくいかなかったのですが、やはり詳しい方に聞いてみるべきですね。本当に助かりました。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問