.active class issue when mapping a boostrap carousel item !! (REACT)

Question

i'm trying to map some bootstrap carousel items but I think my issue is with the .active class, They are mapping one over the other without being able to let me slide them drop the code below, hope someone can help me hehe...

<div id="charactersCards" className="carousel slide border border-warning rounded-lg" data-ride="carousel">
            <div className="carousel-inner text-warning">
                {!!store.character &&
                    store.character.results.map((char, i) => (
                        <div key={i} className="carousel-item text-center active">
                            <div className="card d-block w-100">
                                <img src="https://place-hold.it/400x200" className="card-img-top" alt="Image" />
                                <div className="card-body">
                                    <h5 className="card-title">{char.name}</h5>
                                    <p className="card-text text-white">{bio}</p>
                                    <Link
                                        className="btn text-warning border border-warning"
                                        onClick={() => actions.currentCharId(i + 1)}
                                        to={`/iPeopleCard/${i + 1}`}>
                                        Learn More!
                                    </Link>
                                    <i
                                        className="fas fa-heart mt-3 pt-4 ml-3"
                                        onClick={() => actions.setCharToFav(i)}
                                        style={
                                            actions.characterFindInFav(i) ? { color: "yellow" } : { color: "white" }
                                        }
                                    />
                                </div>
                            </div>
                        </div>
                    ))}
            </div>

Answer 1

You need to set 'active' class conditionally. Because now all of your carousel items have 'active' class. You can do something like this:

// instead of <div key={i} className="carousel-item text-center active">
// write the code below:

<div 
key={i} 
className={i === 0 ? "carousel-item text-center active" : "carousel-item text-center" }>