How to change Cursor Icon upon button click on React

Question

How do I change my cursor to be an icon when I click a button and then place that icon down on the second click, and become a regular cursor again? I'm working in React. All I have is that when I button is clicked, the global boolean clicked is turned to true.

Answer 1

Is this useful for what you need?

const [cursor, setCursor] = useState('crosshair');


  const changeCursor = () => {
    setCursor(prevState => {
      if(prevState === 'crosshair'){
        return 'pointer';
      }
      return 'crosshair';
    });
  }

  return (
    <div className="App" style={{ cursor: cursor }}>

      <h2>Click to change mouse cursor</h2>
      <input  type="button" value="Change cursor" 
      onClick={changeCursor}
      style={{ cursor: cursor }}

      />
    </div>
  );