Runaway Button React App

I made my partner a valentines site using react, and I used emailJS to notify me when they said yes! It was a quick build, but one thing I did get caught on was trying to take people's jquery or vanilla js code from CodePen and use it in my react app for the runaway button on the site.

The runaway button is perfect for pranking friends, and a small thing like this makes computer science very enjoyable for a beginner, so I decided to share.

I've cut a lot of code to focus on the main parts (rest can be found Github). The component has a set x and y where the button begins, but once someone tries to move over the button, the position will change using Math.random(), which is reflected in the CSS of the button.

function App() {

  const [x, setx] = useState(52);
  const [y, sety] = useState(55);

  function mouseOver() {
    setx(Math.random() * 100);
    sety(Math.random() * 100);
  }

  var noStyle = {
    left: x + "%",
    top: y + "%",
    position: "absolute",
  };

  return (
     <button
       onMouseOver={mouseOver}
       style={noStyle}
       onClick={popUp}
     >
       Click me!
     </button>
  );
}

export default App;