CODEWITHSUNDEEP
javascriptreactjs
Gagan Sharma
Gagan Sharma

Reputation: 262

if condition in reactjs

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>

Upvotes: 0

Views: 6278

Answers (3)

adam-beck
adam-beck

Reputation: 6009

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>

Upvotes: 1

Amoolya S Kumar
Amoolya S Kumar

Reputation: 1468

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>);}             
       })()}

Upvotes: 1

Dave Newton
Dave Newton

Reputation: 160191

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.

Upvotes: 0

Related Questions