Tailwind Elements: Unhandled Runtime Error TypeError: Cannot read properties of null (reading '-CodePudding

I am reviewing the error: Unhandled Runtime Error TypeError: Cannot read properties of null (reading 'classList') when using the Carousel component. In my case I am mapping through an array of images and adding carousel-items to the carousel like so:

<div className="carousel-inner relative w-full overflow-hidden max-h-[300px]">
  {project.imageslist.map((image, i) => (
    <div
      key={i}
      className={`carousel-item ${i < 1 ? "active" : ""} float-left w-full`}>
      <img
        src={image.listitemimg}
        className="block w-full"
        alt="Wild Landscape"
      />
    </div>
  ))}
</div>

Any ideas?

I've tried manually adding each carousel-item instead of using map to map through an array, but I am still having the same issue.

CodePudding user response：

The answer to the question was that it's required to also add the same number of button elements as number of slides you have. For example, I added 4 slides (carousel-item)'s but only had 3 buttons within the carousel-indicator. So I added an extra button with the correct details (data-bs-slide and aria-label incremented by 1).

Example (fix):

<div
  className="carousel-indicators absolute right-0 bottom-0 left-0 flex justify-center p-0 mb-4">
  <button
    type="button"
    data-bs-target="#carouselExampleCrossfade"
    data-bs-slide-to="0"
    className="active"
    aria-current="true"
    aria-label="Slide 1"></button>
  <button
    type="button"
    data-bs-target="#carouselExampleCrossfade"
    data-bs-slide-to="1"
    aria-label="Slide 2"></button>
  <button
    type="button"
    data-bs-target="#carouselExampleCrossfade"
    data-bs-slide-to="2"
    aria-label="Slide 3"></button>
  <!-- Fix added below -->
  <button
    type="button"
    data-bs-target="#carouselExampleCrossfade"
    data-bs-slide-to="3"
    aria-label="Slide 4"></button>
</div>

CodePudding user response：

It might be an issue with the project.imageslist array being null or undefined.

Try checking first with project.imageslist.length > 0 before mapping through the array:

{project.imageslist.length > 0 && project.imageslist.map((image, i) => (
    <div
      key={i}
      className={`carousel-item ${i < 1 ? "active" : ""} float-left w-full`}>
      <img
        src={image.listitemimg}
        className="block w-full"
        alt="Wild Landscape"
      />
    </div>
  ))}