Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

import { useState } from 'react';

function Dashboard() {
  const [status, setStatus] = useState('idle');
  const [count, setCount]   = useState(0);
  const [isAdmin, setIsAdmin] = useState(false);

return (
    <div>
      {/* Ternary: one of two outputs */}
      <p>{isAdmin ? '🔐 Admin view' : '👤 User view'}</p>
      <button onClick={() => setIsAdmin(a => !a)}>Toggle admin</button>

{/* && with boolean guard (avoid count && to prevent rendering "0") */}
      {count > 0 && <p>You have {count} notification(s)</p>}
      <button onClick={() => setCount(c => c + 1)}>Add notification</button>

{/* Multi-branch status badge */}
      <div style={{ marginTop: 12 }}>
        <StatusBadge status={status} />
        <div style={{ marginTop: 8 }}>
          {['idle', 'loading', 'success', 'error'].map(s => (
            <button key={s} onClick={() => setStatus(s)} style={{ marginRight: 4 }}>{s}</button>
          ))}
        </div>
      </div>
    </div>
  );
}

export default Dashboard;