Prevent clicking on element

Question

Hi I'm just wondering is there any feature in React.js that allows you block user from clicking on some part of app?

To be more clear I'm working on Tic tac toe app and I would like to block any other clicks to game field if someone wins.

After checkWinner function detects a win, winner is displayed above game field like this

and from now I would like to make that user can click only replay icon or return icon. nothing else.

Part of my checkWinner function in which I've tried to use e.stopPropagation()

  function checkWinner(e){
    //Horizontal check
    for(let i=0;i<values.length;i++){
      let xCount=0;
      let oCount=0;

      for(let j=0;j<values[i].length;j++){
        if(typeof values[i][j] === 'object' && values[i][j].props.children === 'x'){
          xCount++;
        }

        if(typeof values[i][j] === 'object' && values[i][j].props.children === 'o'){
          oCount++;
        }
      }

      if(xCount === 3){
        setWinner('X WINS!');
        displayWinner();
        e.stopPropagation();
      }
    }

This function is called after every click to field, so after every click it checks if someone wins. But this throws me an Error TypeError: Cannot read property 'stopPropagation' of undefined

Do you guys know about any other approach for this situation? Thanks.

The react tutorial covers this same sample app. Have you checked their approach? — msg
– msg, Commented Oct 22, 2020 at 16:36
"TypeError: Cannot read property 'stopPropagation' of undefined" That error strikes me as very clear. Are you passing in the event object where you call checkWinner()? — HoldOffHunger
– HoldOffHunger, Commented Oct 22, 2020 at 16:56

akhtarvahid · Accepted Answer · 2020-10-22 16:51:14Z

1

To disable click you can use CSS property pointer-events: none;

Example to disable click

 function App() {
  const [counter, setCounter] = React.useState(0);
  const handleClick = () => {
    setCounter(counter + 1);
  }
  let disableClass = counter < 5 ? '' : 'disable';
  return (
    <div className="App">
      <h1>Disable button to click after 5</h1>
      <button 
      className={disableClass}
      onClick={handleClick}>Click</button>
      <h3>{counter}</h3>
    </div>
  );
}

css

.disable {
  pointer-events: none;
  border: none;
  padding: 8px 15px;
  background: red;
  color: white;
}

you can follow this and make changes as per your requirement. for more reference check this pointer-events

Live working demo

answered Oct 22, 2020 at 16:51

akhtarvahid

9,7992 gold badges30 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pinncik Over a year ago

Thank you for your answer. Can I ask you for one more thing? :/

akhtarvahid Over a year ago

@Pinncik yeah tell me.

Pinncik Over a year ago

Do you have any experience with animating react-router-dom routes with react-spring?

Collectives™ on Stack Overflow

Prevent clicking on element

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related