How to write write if statement inside loop in reactjs

Question

  <div className="pagination">
  <br />
    <center>
        {[...Array(this.props.pages+1)].map((x, i) =>
          <h2 key={i} onClick={()=>this.demoMethod(i+1)} className="tc">{ i+1 }</h2>
        )}
    </center>
  </div>

Here in my code i wants to write if else statement . Actually it is a pagination logic. i wants to change color of h2 for active page. so i wants to write if statement inside this.

Please share any idea how i can do it..

Umair Farooq · Accepted Answer · 2019-01-23 17:47:30Z

1

You can write if else as follows:

// active is a boolean variable having value true or false
<div className="pagination" style={{color: active? 'red' : 'blue'}}>

Inside loop it can as follows:

{[...Array(this.props.pages+1)].map((x, i) => {
   if(x) {
      return <h2 key={i} onClick={()=>this.demoMethod(i+1)} className="tc">{ i+1 }</h2>
     } else {
       return <p>my paragraph</p>
      }
   }
)}

edited Jan 23, 2019 at 17:47

answered Jan 23, 2019 at 16:51

Umair Farooq

1,8331 gold badge14 silver badges17 bronze badges

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

Collectives™ on Stack Overflow

How to write write if statement inside loop in reactjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related