CODEWITHSUNDEEP
javascriptreactjs
Guddo pundat
Guddo pundat

Reputation: 53

conditional rendering to display in React

enter image description here

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 ?

Upvotes: 2

Views: 1306

Answers (3)

Prabhash Karunathilaka
Prabhash Karunathilaka

Reputation: 131

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

Upvotes: 0

Donut
Donut

Reputation: 112815

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
}

Upvotes: 2

Yash Joshi
Yash Joshi

Reputation: 2774

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

Upvotes: 1

Related Questions