前提・実現したいこと
前回質問したように表示方法が分かれる配列をこちらで質問させていただきました。
https://teratail.com/questions/137796
いただいた丁寧なコードを参考に既存の配列を並べることはできたのですが、まだ選択されていない配列を用意しようとすると、下記のエラーが生じてしまいます。
Thumbnails(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
試してみたこと
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_array_length
a.length = Math.max(0, a.length - 1);
上記の表記を試みましたが、結果は取得できませんでした。
ソースコード
constructor(props) { super(props); this.imageUrls = [ 'https://dummyimage.com/360x240/f29b91/fff&text=1', 'https://dummyimage.com/360x240/efbd40/fff&text=2', 'https://dummyimage.com/360x240/81d654/fff&text=3', 'https://dummyimage.com/360x240/f092c4/fff&text=4', ]; }
JavaScript
1import React from 'react'; 2 3const Thumbnails = ({mainImageIndex, imageUrls}) => { 4 <div className="thumbs"> 5 {!imageUrls.length ? ( 6 <div>Not choosen yet</div> 7 ) : ( 8 [...Array(imageUrls.length-1)].map((_, i) => 9 <div key={i}> 10 <img src={imageUrls[(mainImageIndex + i + 1) % imageUrls.length]} /> 11 </div> 12 )) 13 } 14 </div> 15}; 16 17export default Thumbnails;
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/07/27 11:51