前提
Next.jsでフロントのUIを作成しています。
配列の中にさらに入っている配列の中身を取り出したいのですが、うまくいきません
実現したいこと
reviewsの中のlabelの値を取り出したい
該当のソースコード
shopData.ts
1export const mockData: Restaurant[] = [ 2 { 3 id: 1, 4 name: '', 5 description: '', 6 price: 1000, 7 holidays: [{ id: 1, label: '月曜日', value: 'monday' }], 8 thumbnailUrl: '/images/shop-1.png', 9 reviews: [ 10 { id: 1, content: '', userName: '', createdAt: '' }, 11 { id: 2, content: '', userName: '', createdAt: '' }, 12 ], 13 }, 14 { 15 id: 2, 16 name: '', 17 description: '', 18 price: 1200, 19 holidays: [{ id: 1, label: '月曜日', value: 'monday' }], 20 thumbnailUrl: '/images/shop-2.png', 21 reviews: [ 22 { id: 3, content: '', userName: '', createdAt: '' }, 23 ], 24 }, 25}
index.tsx
1{mockData.map((item, index) => ( 2 <div key={index} className='border rounded-2xl border-gray-200 bg-white overflow-hidden'> 3 <ShopCard 4 id={item.id} 5 name={item.name} 6 description={item.description} 7 price={item.price} 8 thumbnailUrl={item.thumbnailUrl} 9 holidays={item.holidays} 10 reviews={item.reviews} 11 /> 12 </div> 13 ))}
shopCard.tsx
1 2export const ShopCard = (props: Restaurant) => { 3 const { id, name, description, price, thumbnailUrl, holidays, reviews, label} = props; 4 5 return ( 6 <> 7 <p>{reviews.length}件</p> 8 <p className='pb-4'>{description}</p> 9 <div className='flex items-center gap-2 pb-2'> 10 <p className='text-xs rounded-full bg-gray-100 px-2 py-1 mr-3 w-fit'>予算</p> 11 <p>¥{price}</p> 12 </div> 13 <div> 14 <p className='text-xs rounded-full bg-gray-100 px-2 py-1 w-fit'>定休日</p> 15 {holidays && ( 16 <ul> 17 {holidays.map((item, index) => ( 18 <p key={index}>{label}</p> 19 ))} 20 </ul> 21 )} 22 </div> 23 </> 24 ); 25}; 26
試したこと
{description}
などはうまく取り出されているのですが、{label}
の取り出し方がよくわかりません
ぜひご教授お願い致します
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/12/06 06:28
2022/12/06 06:30
2022/12/06 06:33
2022/12/06 06:35
2022/12/06 06:36