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

ConceptExampleMeaning
Basic ternaryx > 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...