Slick slider react?

Question

React

How to add a class with animation to the poster-inform-rating-output in react when changing the slide??
I'm new, don't scold me.
Here is 1 component

import React, { Component } from "react";
import Slider from "react-slick";
import './PosterSlider.sass';
import Slide_chevrolet from './poster_chevrolet.png';
import Slide_ford from './poster_ford.png';
import Slide_porshe from './poster_porshe.png';
import PosterItem from '../PosterItem/PosterItem';

class SimpleSlider extends Component {
    state = {
        cars: [
            {
                img: Slide_chevrolet,
                name:"Shevrolet Suburban",
                description:"Внедорожник класса «K3». Мировая премьера двенадцатого поколения модели состоялась в сентябре 2013 года.",
                engine: "5.3 л",
                transmission: "Автоматическая",
                unit: "Полный 4x4",
                places: "8 c Водителем",
                comfort: "100%",
                comfort_places: "80%",
                economy: "30%",
                price: "229"
            },
            {
                img: Slide_ford,
                name:"Ford Mustang",
                description:"Изначальный вариант был создан на базе агрегатов семейного седана Ford Falcon Первый серийный Mustang сошёл с конвейера 9 марта 1964 года как модель 1965 года",
                engine: "5.0 л",
                transmission: "Автоматическая",
                unit: "Передний",
                places: "4 с водителем",
                comfort: "100%",
                comfort_places: "28%",
                economy: "42%",
                price: "350"
            },
            {
                img: Slide_porshe,
                name:"Porsche Boxster",
                description:"Родстер компании Porsche с шестицилиндровым оппозитным мотором,расположенным продольно в центре. Модель первого поколения появилась в 1996 году,и была своеобразной преемницей модели Porsche 944",
                engine: "3.2 л",
                transmission: "Автоматическая",
                unit: "Полный 4x4",
                places: "2 c Водителем",
                comfort: "100%",
                comfort_places: "15%",
                economy: "57%",
                price: "599"
            }

        ]
    }
    render() {
        const settings = {
            dots: true,
            arrows: false,
            infinite: true,
            speed: 1000,
            fade: true,
            slidesToShow: 1,
            slidesToScroll: 1,
            className: "poster-slider",
            afterChange: (prevIndex, nextIndex) =>{
               ?????
            }
        };
        
        return (
            <Slider {...settings}>
                {this.state.cars.map((car,index) => {
                    return (
                        <PosterItem
                            key={index}
                            img={car.img}
                            name={car.name}
                            description={car.description}
                            engine={car.engine}
                            transmission={car.transmission}
                            unit={car.unit}
                            places={car.places}
                            comfort={car.comfort}
                            comfort_places={car.comfort_places}
                            economy={car.economy}
                            price={car.price}
                        />
                    )
                }) }
            </Slider>
        );
    }
}

export default SimpleSlider;

--------------------------
Second Component
---------------------- ----

import React, { Component } from "react";
import './PosterItem.sass';

import RatingImgGray from './poster_raiting_gray.png';
import RatingImgOrange from './poster_raiting_orange.png';

const PosterItem = (props) => {
  return (
    <div className="poster-item" >
      <div className="poster-img">
        <img src={ props.img } alt="car" />
      </div>
      <div className="poster-about">
        <div className="poster-name">{props.name}</div>
        <div className="poster-descr">{props.description}</div>
        <div className="poster-inform">
          <div className="poster-inform-box">
            <div className="poster-inform-item">
              <div className="poster-inform-about">Обьем Двигателя</div>
              <div className="poster-inform-output">{props.engine}</div>
            </div>
            <div className="poster-inform-item">
              <div className="poster-inform-about">Трансмисия</div>
              <div className="poster-inform-output">{props.transmission}</div>
            </div>
            <div className="poster-inform-item">
              <div className="poster-inform-about">Привод</div>
              <div className="poster-inform-output">{props.unit}</div>
            </div>
            <div className="poster-inform-item">
              <div className="poster-inform-about">Количество мест</div>
              <div className="poster-inform-output">{props.places}</div>
            </div>
          </div>
          <div className="poster-inform-box">
            <div className="poster-inform-item">
              <div className="poster-inform-about">Комфорт</div>
              <div className="poster-inform-rating">
                <div className="poster-inform-rating-output" style={{width:props.comfort}}></div>
              </div>
            </div>
            <div className="poster-inform-item">
              <div className="poster-inform-about">Вместимость</div>
              <div className="poster-inform-rating">
                <div className="poster-inform-rating-output" style={{width:props.comfort_places}}></div>
              </div>
            </div>
            <div className="poster-inform-item">
              <div className="poster-inform-about">Экономичность</div>
              <div className="poster-inform-rating">
                <div className="poster-inform-rating-output" style={{width:props.economy}}></div>
              </div>
            </div>
            <div className="poster-price-box">
              <div className="poster-price">
                <span>${props.price}</span>/День
              </div>
              <a className="btn-add" href=""> Забронировать </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default PosterItem;

Answer 1

Add to variable like this

let myClass = 'class';
<div className={myClass}>Content</div>

and change myClass at the right time (add another one to it)