React if/else within JSX

Question

I am fetching JSON data from an API and then need to display it in a react component. I need to use if/else conditions. For ex. The duration returned by the JSON data might turn out to be 0 or it might not be set at all, in that case, I need to avoid displaying it on the screen. So I need an if/else conditioning inside the row class and display Duration data only if it is being provided by the API, how can I achieve that? I read that JSX doesn't support if/else, what's the alternative in that case?

      <div className="row">
        //if condition needs to go here
        <div className="__section--left">Duration</div>
        <div className="__section--right border">
            {item.durationHours} Hours
            {item.durationMinutes} Minutes
        </div>
      </div>

check this also: Is it possible to use if…else… statement in react render function? — Mayank Shukla
– Mayank Shukla, Commented Aug 17, 2017 at 5:46

Hana Alaydrus · Accepted Answer · 2017-08-17 07:41:04Z

5

You can use ternary expression condition ? ifTrue : ifFalse

so it will be something like this

<div className="row">
  //if condition needs to go here
  { this.state.something === 'something' ?
  <div className="__section--left">Duration</div>
  <div className="__section--right border">
    {item.durationHours} Hours
    {item.durationMinutes} Minutes
  </div>
  : null }
</div>

In above code, if condition true you return some component and if false you return nothing.

answered Aug 17, 2017 at 7:41

Hana Alaydrus

2,22018 silver badges20 bronze badges

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

Collectives™ on Stack Overflow

React if/else within JSX

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related