Conditional rendering

Key points

• You can't write if inside { } in JSX. Use && or ? : instead
• To show or hide something, use &&: {isOpen && <p>Content</p>}
• To show either A or B, use ? :: {isLoggedIn ? <p>Welcome</p> : <p>Please log in</p>}

Try it

import { useState } from "react"

export default function App() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <div style={{ padding: 16 }}>
      <button onClick={() => setIsOpen(!isOpen)}>
        {isOpen ? "Close" : "Open"}
      </button>
      {isOpen && <p>This shows only when it is open</p>}
    </div>
  )
}

1. Make the text shown when open two lines long
2. Show "Closed" only when it's closed (hint: !isOpen &&)
3. Make it start out open (hint: the initial value of useState)

Common pitfalls