Premium
React Chessboard Click/Highlight (N×N Board)
Challenge summary
Build an interactive N×N chessboard in React. Clicking a cell should highlight it and clear the previous selection.
What you'll practice
- Render an N×N chessboard where light/dark squares alternate correctly.
- Clicking a square highlights that square.
- Only one square can stay highlighted at a time.
- Expose selected cell coordinates in the UI (row/column).
- Keep keyboard accessibility with semantic button/grid roles.
What Premium unlocks
Premium unlocks the runnable workspace, behavioral checks, implementation walkthrough, and edge-case discussion.
Free related practice
Upgrade to FrontendAtlas Premium to unlock this challenge. Already upgraded? Sign in to continue.