Unable to use div components with bootstrap classes inside map function in react

Question

I have passed the data via props, the console logs show me the data being passed. here is the code below

import React, { Component } from 'react';
import "../../../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "./TestimonialCard.css";

const Cards = ({cardData}) =>{
    console.log(cardData);
    return(
        <>
        <div className="container">
        <div className="row">
        <div className="col-md-8 col-center m-auto">
            <h2>Testimonials</h2>
            <div id="myCarousel"  className="carousel slide" data-ride="carousel" > 
                <div className="carousel-inner">
                    {cardData.map((slide , index )=>{
                        {console.log(slide)}
                       <div className="item carousel-item active" key={index} >
                       <div className="img-box"> 
                       <img src={slide.image} alt={slide.alt}/>
                       </div>
                       <p className="testimonial">
                           {slide.testimonial}
                       </p>
                       <p className="overview">
                           <b> {slide.name} </b> ,<span>{slide.designation}</span> 
                       </p>
                       </div>
                    })}
            </div>
            <a className="carousel-control left carousel-control-prev" href="myCarousel" data-slide="prev">   
            <i className="fa fa-angle-left"></i>
            </a>
            <a className="carousel-control right carousel-control-next" href="myCarousel" data-slide="next">   
            <i className="fa fa-angle-right"></i>
            </a>
        </div>
        </div>
        </div>
        </div>
        </>
    )
}

export default Cards

Here, I'm not getting an expected UI under my div with carousel-inner class.

Answer 1

You can use it like this:

import React, { Component } from 'react';
import "../../../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "./TestimonialCard.css";

const Cards = ({cardData}) =>{
    console.log(cardData);
    
    const cardData = (cardData) => {
        cardData.map((slide, index) => {
            return (
                <div className="item carousel-item active" key={index}>
                    <div className="img-box">
                        <img src={slide.image} alt={slide.alt}/>
                    </div>
                    <p className="testimonial">
                        {slide.testimonial}
                    </p>
                    <p className="overview">
                        <b> {slide.name} </b> ,<span>{slide.designation}</span>
                    </p>
                </div>
            )
        })
    }
    
    return(
        <>
            <div className="container">
                <div className="row">
                    <div className="col-md-8 col-center m-auto">
                        <h2>Testimonials</h2>
                        <div id="myCarousel"  className="carousel slide" data-ride="carousel" >
                            <div className="carousel-inner">
                                {cardData()}
                            </div>
                            <a className="carousel-control left carousel-control-prev" href="myCarousel" data-slide="prev">
                                <i className="fa fa-angle-left"></i>
                            </a>
                            <a className="carousel-control right carousel-control-next" href="myCarousel" data-slide="next">
                                <i className="fa fa-angle-right"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}

export default Cards

The reason UI was not rendering is because you are using {} instead of () in map inside JSX. If you want to use map inside render() or the JSX you need to use () instead of {} like this:

{cardData.map((slide , index )=> (
    {console.log(slide)}
    <div className="item carousel-item active" key={index} >
          <div className="img-box"> 
            <img src={slide.image} alt={slide.alt}/>
          </div>
          <p className="testimonial">
            {slide.testimonial}
          </p>
          <p className="overview">
             <b> {slide.name} </b> ,<span>{slide.designation}</span> 
          </p>
    </div>
))}