React ES6 Ternary Operator

⚛️ React ES6 Ternary Operator

The ternary operator (? :) is a shorter alternative to if...else.
It is widely used in React for conditional rendering.

🧠 Syntax

🔹 Example Without Ternary


 

🔥 Example With Ternary (Short Version)

⚛️ Ternary in JSX (React Rendering)


 

✔ If isLoggedIn is true → shows "Welcome Back!"
❌ If false → shows "Please Log In"

🧩 Conditional JSX Rendering with Components


 

🔹 Nested Ternary (Use with caution — readability matters)


 

🟢 Using Ternary to Show or Hide Elements


 

🎯 Optional: Short Alternative (Logical AND) for showing only on true

{show && <p>This will show only if condition is true</p>}

🧠 Summary

Concept Example Meaning
Basic ternary x > 10 ? "Yes" : "No" Short conditional
JSX ternary {logged ? "Yes" : "No"} Conditional UI
Component rendering {admin ? <Admin/> : <User/>} Change components
Optional render {show && <p>Text</p>} Render only if true

You may also like...