How to conditionaly add "class" in Reactjs

Question

I am working with Reactjs and i am using nextjs,Right now i am trying to integrate/fetch slider data,Problem is i want to add class "active" to first slide only,So i am trying to use {post.id},But how can i use condition(add "active" class where id="1") ?So how can i do this using loop/mapfunction ? Here is my current code

   <div className={`carousel-item ${post.id === 1 ? 'active' : ''}`}>
                                  <img src="img/blog-slider.png" className="d-block w-100" alt="..." />
                                  <div className="carousel-caption  d-md-block">
                                    <h5>MBG starts Their Journey</h5>
                                    <p>Along with collecting as much data and information as possible, completing their research, and making their plan, the MBG team has now begun to implement their plan in detail, and they are in the initial steps. With the completion of any step, the MBG team will inform you about the latest news and information</p>
                                  </div>
                                </div>

Answer 1

You can simply do it in this way :

<div className={`carousel-item ${post.id == 1 ? 'active' : ''}`}>

Answer 2

Using index we can have a condition as below

<>
  <div className={`carousel-item ${index === 0 ? "active" : ""}`}></div>
</>;

or -as per the condition you mentioned

<>
  <div className={`carousel-item ${post.id == 1 ? "active" : ""}`}></div>
</>;

Answer 3

{this.state.trending.map((post, index) => {
var dt = post.CreatedAt;
  return (
           <>
           <div className={post.id == ‘1’ ? ‘carousel-item’ : ‘’>
           </>
          )
         })}

For more information checkout

ternary operator