How to click on a div in a chessboard using componenents in react?

Question

I am trying to code a chessboard in order to prepare for an interview from this - challenge

I want it to look like this -

When you click on any tile of the chessboard all the diagonals change color to red.

Till I have achieved to display the chessboard using 2d for loop and tile component.

This is how I have done it -

app.js

import Chessboard from './Chessboard'

function App() {
  return (
    <div className="app">
      <Chessboard/>
    </div>
  );
}

export default App;

chessboard.js

import React from "react";
import '../Chessboard.css';
import Pixel from "./Pixel";

const horizontalAxis = [ "a", "b","c","d","e","f","g","h"]
const verticalAxis = [ "1", "2","3", "4","5","6","7","8"]

function Chessboard() {

    let board=[]

    for (let j = verticalAxis.length - 1; j >= 0; j--) {
        for (let i = 0; i < horizontalAxis.length; i++) {
            if((i+j)%2===0)
            {
                board.push(<Pixel key={i.toString()+j.toString()} selectedColor="black"/>)
            }
            else
            {
                board.push(<Pixel key={i.toString()+j.toString()} selectedColor="white"/>)                // board.push(<div className="tile white-tile"></div>)
            }
            
        }
    };

  return (
    <div id="chessboard">
        {board}
    </div>
  );
}

export default Chessboard;

Pixel.js

export default function Pixel(props){
    
    const {selectedColor} = props
    
    return (<div className="tile" style={{ backgroundColor: selectedColor }}></div>)
}

pixel css

.tile{
    width: 100px;
    height: 100px;
}

This looks like this

Now this where I am stuck, how do I make the tiles clickable?

I tried onClick function and using events like this

    function test(_e){
        console.log("works")
    }

    for (let j = verticalAxis.length - 1; j >= 0; j--) {
        for (let i = 0; i < horizontalAxis.length; i++) {
            if((i+j)%2===0)
            {
                board.push(<Pixel onClick={e => test(e)} key={i.toString()+j.toString()} selectedColor="black"/>)
            }
            else
            {
                board.push(<Pixel key={i.toString()+j.toString()} selectedColor="white"/>)                // board.push(<div className="tile white-tile"></div>)
            }
            
        }
    };

this should console log message when you click on black tiles but this does not work.

I am stuck as to I have no idea on how to display the diagonal red colour on clicking of a tile.

What can I do to solve this?

Edit: Made changes to pixel.js now clicking of div works and colour changes

export default function Pixel(props){
    const {selectedColor} = props

    const [pixelColor, setPixelColor] = useState(selectedColor);
    const [originalColor, changeOriginalColor] = useState(true);
  

    function applyColor() {
        if(originalColor)
        {
            setPixelColor("#FF0000");
            changeOriginalColor(false);
        }
        else{
            setPixelColor(selectedColor);
            changeOriginalColor(true);
        }
      }
    
      

    return (<div 
        className="tile" 
        onClick={applyColor}
        style={{ backgroundColor: pixelColor }}
    ></div>)
}

Now I cant figure out how to do the diagonal thing where if you click on any one tile all the diagonals will turn red as shown in the picture above.

How should I trigger it from chessboard.js?

Any solution for that is appreciated, I am stuck over here.

Answer 1

This is already explained in this question: onClick does not work for custom component

That said, in your code, the onClick prop is unused in your Pixel component right now, so passing it down to the DOM element would be enough to unblock you.

export default function Pixel({ selectedColor, onClick }) {  
  return (
    <div
      onClick={onClick} // <--- Here
      className="tile"
      style={{ backgroundColor: selectedColor }}
    />
  );
}