if condition in reactjs

Question

If condition is not working in reactjs. want to create a carousel so that its first image contains class "active" where as other do not.

Condition is the index is zero or not

how to apply if condition in react

class CaseImages extends React.Component {
  constructor() {
    super();
  }

  _getImages() {
    return this.props.images.map((image, index) => 
                                 if ({index}==0}<div className="item active" key={index}><img src={image.url} class="case-image"/ ></div>}
                                else{
                                 <div className="item" key={index}><img src={image.url} class="case-image"/ ></div>
                                 }
                                );
}
	render(){
		return(
		<div className="row">
			<div className="col-xs-12 col-sm-12">
				<div className="case-feature-image">
					<div id="myCarousel" className="carousel slide" data-ride="carousel">
                        <div className="carousel-inner" role="listbox">
                                {this._getImages()}
                        </div >
      <a className ="left carousel-control" href ="#myCarousel" role ="data-slide = "prev">
      <span className = "glyphicon glyphicon-chevron-left"
      aria - hidden = "true"> </span>
                            <span className="sr-only">Previous</span>
      </a>
                        <a className="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                            <span className="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span className ="sr-only"> Next </span>
                        </a>
      </div>
				</div>
      </div>
		</div>
    )
  };
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

The {index} shouldn't even work at all. You only need the braces inside JSX code (the pseudo-HTML part). — Joshua Engel
– Joshua Engel, Commented Nov 29, 2016 at 19:51
if ({index}==0} is invalid. Did you mean if (index == 0)? Please format your code. — Nick
– Nick, Commented Nov 29, 2016 at 19:51
@tanjir No, it's wronger than that (and if index is guaranteed numeric, non-strict equality is fine). — Dave Newton
– Dave Newton, Commented Nov 29, 2016 at 19:57
@tanjir Because you can't use {} as the OP did in plain JS functions. If it's an JSX expression the entire expression is surrounded by{} as in the answers below. — Dave Newton
– Dave Newton, Commented Nov 29, 2016 at 20:15

adam-beck · Accepted Answer · 2016-11-29 20:08:35Z

1

Try something similar to the following:

<div className={index === 0 ? 'item active' : 'item'}>...</div>

You could also use a function to calculate the correct classes:

// this function needs to live *outside* of JSX
function getClasses(index) {
  return 'item' + index === 0 ? ' active' : '';
}

// this is in the JSX
<div className={getClasses(index)}>...</div>

edited Nov 29, 2016 at 20:08

answered Nov 29, 2016 at 19:52

adam-beck

6,0295 gold badges22 silver badges35 bronze badges

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

Comments

Amoolya S Kumar · Accepted Answer · 2016-11-29 20:06:09Z

1

You can either use a conditional operator as follows:

{index===0? 
    <div className="item active" key={index}><img src={image.url} class="case-image"/ ></div>
:
    <div className="item" key={index}><img src={image.url} class="case-image"/ ></div>
}

or a function like this :

{(()=> {     
       if(index===0){
           return(<div className="item active" key={index}><img src={image.url} class="case-image"/ ></div>);}
       else{
           return(<div className="item" key={index}><img src={image.url} class="case-image"/ ></div>);}             
       })()}

edited Nov 29, 2016 at 20:06

answered Nov 29, 2016 at 19:56

Amoolya S Kumar

1,4689 silver badges10 bronze badges

5 Comments

Amoolya S Kumar Over a year ago

true, I just wanted to show how to use an if block within the render. :) Best option in this scenario is to use a ternary operator and add the class.

Amoolya S Kumar Over a year ago

removed 'cooler'. I was just really happy when I had first learnt we can use if-else blocks within the render. Makes the code more readable. And you can always initialize an empty list inside the block and insert more than one div in case of if or else, and return the list. I've found that very useful in many instances.

Dave Newton Over a year ago

I argue against using if statements in renders--it injects too much responsibility, and mixes layers of abstractions. I feel like you start needing that kind of complexity, it should be removed to either (a) an external function (in the class or not) or (b) a separate component altogether. YMMV.

Amoolya S Kumar Over a year ago

Sometimes, it makes the code more easier to read. If it is possible to move into a separate component (b), that's definitely better, but I'm not fond of (a) invoking functions from within the render. I used to do it all the time, and end up with a ton lot of functions within the render. :/

Dave Newton Over a year ago

It's refactoring like any other. Any time you have an inflection point like that it makes the JSX that much harder to read. For trivial stuff, like in this case, as long as it's limited only to the expression involved, I might let it through a code review, but only if other duplication is removed.

Dave Newton · Accepted Answer · 2016-11-29 20:03:37Z

0

I'll throw another alternative into the hat, using classnames:

const divClass = classNames('item', { active: index === 0 })
...
<div className={divClass} key={index}>
  <img src={image.url} className="case-image" />
</div>

I prefer wrapping up calculations outside of tags, and de-duplicating as much as possible.

answered Nov 29, 2016 at 20:03

Dave Newton

161k27 gold badges263 silver badges310 bronze badges

2 Comments

adam-beck Over a year ago

Would this need to be separated into a separate component where you pass index as a property?

Dave Newton Over a year ago

@adam-beck No, but it could be.

Collectives™ on Stack Overflow

if condition in reactjs

3 Answers 3

Comments

5 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related