React Conditional Rendering

Some of the react’s conditional rendering are as follows

Show “Welcome” if logged in

function App() {
  const isLoggedIn = false; // change to true

  return (
    <div>
      {isLoggedIn ? <h1>Welcome Back!</h1> : <h1>Please Log In</h1>}
    </div>
  );
}

export default App;

🔹 2. Show “Discount Available” if user is a premium member

function App() {
  const isPremium = true; // try changing to false

  return (
    <div>
      {isPremium ? <h2>You get a discount!</h2> : <h2>No discount available.</h2>}
    </div>
  );
}

export default App;

🔹 3. Show weather message based on temperature

function App() {
  const temperature = 30; // change number

  return (
    <div>
      {temperature > 25 ? <p>It's hot outside 🌞</p> : <p>It's cool outside ❄️</p>}
    </div>
  );
}

export default App;

4. Show product availability

function App() {
  const isInStock = false; // toggle this

  return (
    <div>
      {isInStock ? <p>Product is available ✅</p> : <p>Out of stock ❌</p>}
    </div>
  );
}

export default App;

5. Show pass/fail result

function App() {
  const marks = 45; // change this

  return (
    <div>
      {marks >= 50 ? <h1>Pass 🎉</h1> : <h1>Fail 😔</h1>}
    </div>
  );
}

export default App;