reactjs - How to use useState (in React) to prevent from clicking a div more than once?

Question

I'm trying to fix my current bug where I have 6 clickable divs with onClick() events. Upon clicking div 'a','b' or 'c' for example, the count will increment by 1. After that, those divs cannot be clicked again. So far, I'm using useRef() and set attribute to 'disabled' but that is not working.

Another question is if it's possible to extract this to make a reusable component for other games that has the same div properties but different correct answers.

My code for updateScore and onClick as below:

  import React, { useState, useRef } from "react";
    const ClickScore = ({ taskNumber, numberOfAnswers }) => {
  const [grid11, setGrid11] = useState("");
  const [grid12, setGrid12] = useState("");
  const [grid13, setGrid13] = useState("");
  const [grid21, setGrid21] = useState("");
  const [grid22, setGrid22] = useState("");
  const [grid23, setGrid23] = useState("");
  const [score, setScore] = useState(0);

  const grid11Clicked = () => {
    setGrid11("clicked");
  };
  const grid12Clicked = () => {
    setGrid12("clicked");
  };
  const grid13Clicked = () => {
    setGrid13("clicked");
  };
  const grid21Clicked = () => {
    setGrid21("clicked");
  };
  const grid22Clicked = () => {
    setGrid22("clicked");
  };
  const grid23Clicked = () => {
    setGrid23("clicked");
  };
  let gridRef = useRef();

  const onGridClick = (e) => {
    if (gridRef.current) {
      gridRef.current.setAttribute("disabled", "disabled");
    }
  };

  const updateScore = () => {
    if (taskNumber === 1) {
      if (grid12 || grid21 || grid23 === "clicked") {
        setScore((prevScore) => prevScore + 1);
      }
      return `${score}/${numberOfAnswers}`;
    }
  };

  const clickHandler12 = () => {
    setGrid11("clicked");
    updateScore();
    onGridClick();
    console.log("disabled");
  };
  const clickHandler21 = () => {
    setGrid21("clicked");
    updateScore();
    onGridClick();
    console.log("disabled");
  };
  const clickHandler23 = () => {
    setGrid23("clicked");
    updateScore();
    onGridClick();
    console.log("disabled");
  };

  return (
    <>
      <div>
        <p id="score">{score}</p>
      </div>
      <div
        onClick={grid11Clicked}
        style={{
          position: "absolute",
          border: 1,
          borderColor: "blue",
          left: 23,
          height: 170.48,
          width: 290.86,
          top: 37.91,
          zIndex: 10,
          borderStyle: "solid",
        }}></div>
      <div
        onClick={grid12Clicked}
        style={{
          position: "absolute",
          border: 1,
          borderColor: "red",
          left: 298.86,
          height: 170.48,
          width: 290.86,
          top: 37.91,
          zIndex: 10,
          borderStyle: "solid",
        }}></div>
      <div
        onClick={grid13Clicked}
        style={{
          position: "absolute",
          border: 1,
          borderColor: "red",
          left: 600,
          height: 170.48,
          width: 290.86,
          top: 37.91,
          zIndex: 10,
          borderStyle: "solid",
        }}></div>
      <div
        onClick={clickHandler21}
        style={{
          position: "absolute",
          border: 1,
          borderColor: "red",
          left: 3,
          height: 170.48,
          width: 290.86,
          top: 212.91,
          zIndex: 10,
          borderStyle: "solid",
        }}></div>
      <div
        onClick={grid22Clicked}
        style={{
          position: "absolute",
          border: 1,
          borderColor: "red",
          left: 298.86,
          height: 170.48,
          width: 290.86,
          top: 212.91,
          zIndex: 10,
          borderStyle: "solid",
        }}></div>
      <div
        onClick={clickHandler23}
        style={{
          position: "absolute",
          border: 1,
          borderColor: "red",
          left: 600,
          height: 170.48,
          width: 290.86,
          top: 212.91,
          zIndex: 10,
          borderStyle: "solid",
        }}></div>
    </>
  );
};

export default ClickScore;

question from:https://stackoverflow.com/questions/65857158/how-to-use-usestate-in-react-to-prevent-from-clicking-a-div-more-than-once

Answer 1

This could work out.

import React, { useState } from 'react'

const GridCell = ({ style, onGridClick }) => {
  const [clicked, setClicked] = useState(false)

  const handleClick = () => {
    if (!clicked) {
      setClicked(true)
      onGridClick()
    }
  }
  return (
    <div
      style={{
        position: 'absolute',
        border: 1,
        zIndex: 10,
        borderStyle: 'solid',
        ...style,
      }}
      onClick={handleClick}
      diabled={clicked}
    ></div>
  )
}

const ClickScore = ({ taskNumber, numberOfAnswers }) => {
  const [score, setScore] = useState(0)

  const onGridClick = (row, col) => {
    if (taskNumber === 1) {
      if (
        (row === 1 && col === 2) ||
        (row === 2 && col === 1) ||
        (row === 2 && col === 3)
      ) {
        setScore((prevScore) => prevScore + 1)
      }
      return `${score}/${numberOfAnswers}`
    }
  }

  return (
    <>
      <div>
        <p id='score'>{score}</p>
      </div>

      <GridCell
        onGridClick={() => onGridClick(1, 1)}
        style={{
          borderColor: 'blue',
          left: 23,
          height: 170.48,
          width: 290.86,
          top: 37.91,
        }}
      />
      <GridCell
        onGridClick={() => onGridClick(1, 2)}
        style={{
          borderColor: 'red',
          left: 298.86,
          height: 170.48,
          width: 290.86,
          top: 37.91,
        }}
      />
      <GridCell
        onGridClick={() => onGridClick(1, 3)}
        style={{
          borderColor: 'red',
          left: 600,
          height: 170.48,
          width: 290.86,
          top: 37.91,
        }}
      />
      <GridCell
        onGridClick={() => onGridClick(2, 1)}
        style={{
          borderColor: 'red',
          left: 3,
          height: 170.48,
          width: 290.86,
          top: 212.91,
        }}
      />
      <GridCell
        onGridClick={() => onGridClick(2, 2)}
        style={{
          borderColor: 'red',
          left: 298.86,
          height: 170.48,
          width: 290.86,
          top: 212.91,
        }}
      />
      <GridCell
        onGridClick={() => onGridClick(2, 3)}
        style={{
          borderColor: 'red',
          left: 600,
          height: 170.48,
          width: 290.86,
          top: 212.91,
        }}
      />
    </>
  )
}