App.js

import React, {useState, useEffect} from 'react';
import ReactDOM from 'react-dom';
import Coordenadas from './Coordenadas'

const App = () => {
  const mouseListener = () => window.addEventListener('mousemove', change);

  const [vis, setVisibilidad] = useState(false);
  const [mX, getMouseX] = useState(0);
  const [mY, getMouseY] = useState(0);

  const alterarVisibilidad = () => {
    setVisibilidad((vis) => !vis);
  }

  useEffect(() => {
    mouseListener();
  })

  const change = (e) => {
    getMouseX(e.clientX)
    getMouseY(e.clientY)
  }


  return <div>
    {vis ? <Coordenadas coordX={mX} coordY={mY} /> : <div>Oculto</div> }
    <button type='button' onClick={alterarVisibilidad}>Visibilidad</button>
  </div>
}

ReactDOM.render(<App />, document.querySelector("#root"));