conditional rendering to display in React

Question

I wanted to display badge/text after which condition is met from two conditions. First condition is that if no openSopts available then show SOLD OUT badge/text and if this condition is not met then check if it is online and then show badge/text of ONLINE . But badge/text is not shown on card component, can you please tell me what mistake i am doing ?

Answer 1

The JSX being returned does not include the JSX in your if / else statement. It needs to be part of the JSX that's returned in order for it to show up.

You could use ternary expressions to do it like this (add this to the JSX after your return statement, put it wherever you'd like the badge rendered):

{ props.openSpots === 0 ? <div className="card--badge">SOLD OUT</div> : null }
{ props.openSpots > 0 && props.location === "Online" ? <div className="card--badge">Online</div> : null }

You could nest them if you wanted a single statement, but that starts to get difficult to read :

{
   props.openSpots === 0 
      ? <div className="card--badge">SOLD OUT</div> 
      : props.location === "Online" 
         ? <div className="card--badge">Online</div> 
         : null
}

Answer 2

You are not using the JSX in the rendering part, its just a statement.

Either save the JSX in variable like this:

let badge = null

if (openSpots === 0) {
badge = ..
} else if (..) {
badge = ..
}

// Use it in code 

...
<div class="card-badge">{badge}</div>

Or use conditional rendering inline

Answer 3

Just assign your code piece to a variable and then render it wherever you want.😊

...
const badge = openSpots === 0 ? <div className="card--badge">SOLD OUT</div> : <div className="card--badge">Online</div>
...
return (
  <div>
   {badge}
  </div>
);