Gagan Gagan - 1 year ago 115
React JSX Question

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() {

_getImages() {
return, index) =>
if ({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>
<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">
</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 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>

<script src=""></script>
<script src=""></script>

Answer Source

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>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download