Chessboard in React
Render an 8 by 8 chessboard with the pieces in their starting positions, then make it interactive. The starter parses the start position into a pieces object keyed by "row,col" and gives you squareName and pieceName helpers.
Requirements
- Squares alternate colours;
a8(top-left) is light, like a real board. - Each square is a button labelled with its name and the piece on it (
"e1, white king"), so the board reads correctly to a screen reader. - Clicking a square with a piece selects it (visibly highlighted); clicking another square moves the piece there, capturing whatever was on it; clicking the selected square again deselects.
- The status line says what is selected.
- Keep every update immutable.
Follow-ups to be ready for: legal-move highlighting for one piece type, an n by n board from a prop, and undo.
Hints
Hint 1
The board pattern needs no state. Map over Array.from({ length: 64 }), derive row = Math.floor(i / 8), col = i % 8, and colour by (row + col) % 2.
Hint 2
One selected state holding a square key is enough; a click either selects, moves, or clears depending on it.
Hint 3
To move, copy the pieces object, write the piece under the new key, and delete the old key.