How to append "active" class on first div using loop in Reactjs

December 14, 2022

I am working in Reactjs and using nextjs framework,right now i fetching data (videos) in slider and i want by default "active class" should be added to first value of array, In other words before click on slide i want by default value should "active" and should remove after click on "slide arrow" (< or >) button,How can i do this ? Here is my code

{this.state.trending.map((post, index) => {
return (
    <>
        <div class="carousel-item active">
        <YouTube videoId={post.VideoId} opts={opts} />
        </div>
    </>
     )
 })}

>Solution :

This should work:

{this.state.trending.map((post, index) => {
   return (
    <>
      <div class={`carousel-item ${index===0 ? "active" : ""`}>
        <YouTube videoId={post.VideoId} opts={opts} />
      </div>
    </>
   )
})}