The elements are not displayed in React using TECarousel with map function

[jisooyu]

The campingItem passed down from CampingDisplay to CampingDetail is not displayed.
The code snippets are the follwings. Please help me to locate the problem.

// CampingDisplay.js
import CampingDetail from './CampingDetail';

function CampingDisplay({ campingData }) {
	return (
		<>
			{campingData.map((campingItem) => (
				<div key={campingItem.contentId}>
					<CampingDetail campingItem={campingItem} />
				</div>
			))}
		</>
	);
}

export default CampingDisplay;

//CampingDetail.js
import React from 'react';
import { TECarousel, TECarouselItem } from 'tw-elements-react';

function CampingDetail({ campingItem }) {
	return (
		<>
			<h2 className='text-2xl font-bold mb-4'>Go Camping Information</h2>
			<TECarousel
				showControls
				showIndicators
				ride='carousel'
			>
				<div className="relative w-full overflow-hidden after:clear-both after:block after:content-['']">
					<TECarouselItem
						itemID={campingItem.contentId}
						className='relative float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none'
					>
						<img
							src={campingItem.firstImageUrl}
							alt='campingPicture'
							className='block w-full'
						/>
						<p>{campingItem.addr1}</p>
					</TECarouselItem>
				</div>
			</TECarousel>
		</>
	);
}

export default CampingDetail;

[juujisai]

Hi! Seems like you are using the Carousel component for each Carousel Item. Move the TECarousel to the CampingDisplay component and inside the CampingDetail component leave only the TECarouselItem , for example like this:

import React from "react";
import { TECarouselItem } from "tw-elements-react";

interface CampingItem {
  contentId: number;
  firstImageUrl: string;
  addr1: string;
}

function CampingDetail({ campingItem }: { campingItem: CampingItem }) {
  return (
    <TECarouselItem
      itemID={campingItem.contentId}
      className="relative float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none"
    >
      <img
        src={campingItem.firstImageUrl}
        alt="campingPicture"
        className="block w-full"
      />
      <div className="absolute inset-x-[15%] bottom-5 hidden py-5 text-center text-white md:block">
        <p>{campingItem.addr1}</p>
      </div>
    </TECarouselItem>
  );
}

export default CampingDetail;