React Carousel.Item not rendered

Question

I use react-bootstrap Carousel. Normally, if I call Carousel.Item inside a Carousel, everything works just fine. However, when I enclose the Carousel.Item inside a custom component, the react-bootstrap Carousel cannot find the Carousel.Item and hence renders nothing. I have tried by placing 3 Carousel.Item inside the this Testimonial's Carousel but it works. I just want things to look better by creating a testimonial component with Carousel.Item and re-use that.

export const Testimonial = () => {

    return (
        <Row>
            <Col lg={8} sm={12} md={12} className="m-auto">
                <Carousel>
                    <TestimonialItem/>
                    <TestimonialItem/>
                    <TestimonialItem/>
                </Carousel>
            </Col>
        </Row>
    )
}

const TestimonialItem = () => {
    return (
        <Carousel.Item >
            <Row>
                <Col lg={12} sm={12}>
                    <div class="testimonial-content style-2">
                        <div class="author-info ">
                            <div class="author-img">
                                <img src={ath1} alt="" class="img-fluid" />
                            </div>
                        </div>

                        <p><Icofont icon="icofont-quote-left" class="icofont icofont-quote-left"></Icofont>They is a great platform to anyone like who want to start buisiness but not get right decision. It’s really great placefor new to start the buisness in righ way! <i class="icofont icofont-quote-right"></i></p>
                        <div class="author-text">
                            <h5>Marine Joshi</h5>
                            <p>Senior designer</p>
                        </div>
                    </div>
                </Col>
            </Row>
        </Carousel.Item>
    )
}

Answer 1

You need to pass props on Carousel.Item

So, the Carousel.Item looks like <Carousel.Item {...props}>

Please see my example code

import React from 'react';
import { Row, Col, Carousel } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.css";

const Testimonial = () => {

  return (
      <Row>
          <Col lg={8} sm={12} md={12} className="m-auto">
              <Carousel>
                  <TestimonialItem/>
                  <TestimonialItem/>
                  <TestimonialItem/>
              </Carousel>
          </Col>
      </Row>
  )
}

const TestimonialItem = (props) => {
  const ath1 = "https://cdn.pixabay.com/photo/2021/07/21/08/33/lavenders-6482579_960_720.jpg";
  return (
      <Carousel.Item {...props}>
          <Row>
              <Col lg={12} sm={12}>
                  <div class="testimonial-content style-2">
                      <div class="author-info ">
                          <div class="author-img">
                              <img src={ath1} alt="" class="img-fluid" />
                          </div>
                      </div>

                      <p>
                        {/* <Icofont icon="icofont-quote-left" class="icofont icofont-quote-left"></Icofont> */}
                        They is a great platform to anyone like who want to start buisiness but not get right decision. It’s really great placefor new to start the buisness in righ way! <i class="icofont icofont-quote-right"></i></p>
                      <div class="author-text">
                          <h5>Marine Joshi</h5>
                          <p>Senior designer</p>
                      </div>
                  </div>
              </Col>
          </Row>
      </Carousel.Item>
  )
}

export default Testimonial;