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>

Ali Sattarzadeh · Accepted Answer · 2022-11-17 07:16:02Z

3

You can simply do it in this way :

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

edited Nov 17, 2022 at 7:16

answered Nov 17, 2022 at 7:13

Ali Sattarzadeh

3,6472 gold badges9 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

KcH Over a year ago

it might fail when it is "1" as string with strict equality

KcH · Accepted Answer · 2022-11-17 07:13:29Z

0

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>
</>;

answered Nov 17, 2022 at 7:13

KcH

3,5224 gold badges28 silver badges61 bronze badges

Comments

Libby Lebyane · Accepted Answer · 2022-11-17 07:17:36Z

0

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

For more information checkout

ternary operator

answered Nov 17, 2022 at 7:17

Libby Lebyane

1752 silver badges14 bronze badges

Collectives™ on Stack Overflow

How to conditionaly add "class" in Reactjs

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related