Conditional rendering
function
Render elements conditionally using logical &&, ternary operator, or if statements.
Syntax
{condition && <Component />} {condition ? <A /> : <B />}
Example
javascript
function Alert({ type, message }) {
return (
<div>
{/* Logical AND */}
{message && <p>{message}</p>}
{/* Ternary */}
{type === 'error'
? <div className="alert-danger">{message}</div>
: <div className="alert-info">{message}</div>
}
{/* Multiple conditions */}
{type === 'success' && <span>✓</span>}
{type === 'error' && <span>✗</span>}
</div>
);
}