Why the color doesn't change when the button is clicked?

Not sure why this is not working, when i click the buttons nothing changes?

I'm trying to create a login/signin page in ReactJs

Imports on page:

        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Component:

import React from "react";
import Button from "./Button";
function Body() {
  const [color, setColor] = React.useState("pink");
  React.useEffect(() => {
    document.body.style.background = color;
  }, [color]);

  function ChangeColor() {
    setColor("red");
  }
  return (
    <div className="Body">
      <h3>Already have an account? </h3>
      <Button content="Sign In" onClick={() => ChangeColor()} />
      <h3>Don't have an account? </h3>
      <Button content="Sign Up" onClick={() => ChangeColor()} />
    </div>
  );
}
export default Body;

You forgot to add onclick event to your Button component to which you pass the handler from the props.

import React from "react";

function Button({ content, onClick /* <- Here */ }) {
  return <button onClick={onClick}>{content}</button>;
}                         // ^ HERE 

export default Button;