ClassName is not being passed to Objects

Question

Code is below. I'm trying to pass an active state to a slide in a carousel for React. But in the inspector, all I get is class name [object. object] instead of the correct class name. Is there a particular reason why the className is not being passed to the slides within the carousel? I tried to make it so

class ProductSlider extends React.Component {
    constructor(props) {
      super(props);
      this.state = { activeSlide: -1, prevSlide: -1, sliderReady: false };
    }
      runAutochangeTO() {
        this.changeTO = setTimeout(() => {
          this.changeSlides(1);
          this.runAutochangeTO();
        }, this.AUTOCHANGE_TIME);
      }
      changeSlides(change) {
        window.clearTimeout(this.changeTO);
        const { length } = this.props.slides;
        const prevSlide = this.state.activeSlide;
        let activeSlide = prevSlide + change;
        if (activeSlide < 0) activeSlide = length - 1;
        if (activeSlide >= length) activeSlide = 0;
        this.setState({ activeSlide, prevSlide });
      }
render() {
        const { activeSlide, prevSlide, sliderReady } = this.state;

        return(
            <div ClassName="product-body">
                <header>
                    <NavBar></NavBar>
                </header>
                <div className={('slider', {'s--ready': sliderReady})}>
                    <div className="carousel_nav">
                        <span id="moveLeft" className="slider__control" onClick={() => this.changeSlides(-1)}>
                            <svg className="carousel__icon" width="15" height="26" viewBox="0 0 15 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12.8507 24.0657L2 13.215L12.8507 2.36432" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </span>
                        <span id="moveRight" className="slider__control slider__control__right" onClick={() => this.changeSlides(1)}>
                            <svg className="carousel__icon" width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M13.4109 3.00001L24.0779 14.0312L13.0467 24.6983" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </span>
                    </div>
                    <div className="slider__slides pages">
                        {slides.map((slide,index) =>(
                            <div
                            className={('slider__slide'), {'s--active':activeSlide ===index, 's--prev': prevSlide===index}}
                            key={slide.index}>
                            <div className="carousel-item ProductItem">
                              <div className="ImgWrap ImageWrap">
                                <img src={slide.img} className="carousel-item-image"></img>
                                <div className="ImgShadow"></div>
                                  </div>  
                                  <div className="ProductInfo carousel-info">
                                    <div className="ProductTop carouself-item-top" id="carouself-info-top">
                                        <h2 className="ProductPrice item_price">
                                        {slide.price}</h2>
                                        <h1 className="ProductTitle item_title">{slide.title}</h1>
                                        <div className="ProductCategoryCalories item-category-info">
                                            <h3 className="ProductCategory item_category">{slide.category}</h3>
                                            <h3 className="ProductCalories item_calories">{slide.calories}</h3>
                                        </div>
                                    </div>
                                    <p className="ProductDescrip item_description">{slide.description}</p>
                                    <div className="ProductQty product-qty">
                                        <h4 className="QtyTitle qty_title">QUANTITY</h4>
                                        <Quantity className="QtyPicker"></Quantity>
                                    </div>
                                    <button className="CheckOutBtn addToBag">
                                        <h2>ADD TO BAG</h2>
                                    </button>
                                  </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        )
    }
}
const slides = [
    { index: 0,
      background: 'green',
      img: imageList.turdBurgler, 
      price: '$5.00',
      title: 'Turd Burgler',
      category: 'stranger',
      calories: '789 calories',
      description: 'Two chocolate cake donuts smothered in cookie butter glaze. Oreo chocolate chip cookie dough. With fudge drizzle.'
    }]

Answer 1

You can add class name without adding any external library.

<div className={`slider ${sliderReady ? 's--ready' : ''}` }>

Note: You can read more about Template Literals.

Answer 2

By doing this:

<div className={('slider', {'s--ready': sliderReady})}>

You are passing an object to className, while it expects a string.

I think what you are looking for is classnames, which is a library that lets you join classNames together, and that can be used like this:

const sliderClasses = classNames('slider',{ 's--ready': sliderReady });

<div className={sliderClasses}>