The ternary operator is useful when [React](/courses/reactjs) needs to choose between two pieces of UI. Its [JavaScript](/courses/javascript) syntax is: ```text condition ? valueIfTrue : valueIfFalse ``` ### Basic React Example ```jsx function LoginStatus({ isLoggedIn }) { return (

{isLoggedIn ? "Welcome back" : "Please sign in"}

); } ``` The logic is: ```text isLoggedIn = true → "Welcome back" isLoggedIn = false → "Please sign in" ``` ### Rendering Different Components A ternary can return [JSX](/courses/reactjs) as well: ```jsx function Account({ isLoggedIn }) { return (

{isLoggedIn ? ( ) : ( )}

); } ``` This is useful when exactly one of two alternatives should appear. ### Ternary Inside a Prop Conditional values can also be used in props: ```jsx ``` ### Ternary for Role-Based Labels ```jsx {user.role === "admin" ? "Administrator" : "User"} ``` ### Avoid Deeply Nested Ternaries This may technically work: ```jsx {loading ? : error ? : user ? : } ``` but several nested conditions become difficult to read. Early returns are often clearer: ```jsx if (loading) { return ; } if (error) { return ; } if (!user) { return ; } return ; ``` ### When Should You Use a Ternary? A ternary works best when the condition is simple and there are two clear alternatives: ```text true UI vs false UI ``` ### Interview-Ready Answer The ternary operator is commonly used in React when a condition should choose between two values or pieces of JSX. Its form is `condition ? trueResult : falseResult`. It works well for simple alternatives, but deeply nested ternaries should usually be replaced with clearer conditions or early returns.