How to run React function within another component

Question

I have two components. They both render fine. Component one is inside component two. A button inside a box.

When I click the button I want to alert('hello'), but no success... However, if I insert the button-component alone in class Main it works...

Component one:

class Button extends Component {
  sayHello() {
    alert("hello!");
  }

  render() {
    return (
      <div>
        <button onClick={() => this.sayHello()}>PRESS</button>
      </div>
    );
  }
}

export default Button;

Component two:

class Box extends Component {
  render() {
    return (
      <div>
        <h1>I just want say...</h1>
        <Button />
      </div>
    );
  }
}

export default Box;

index.js :

class Main extends React.Component {
  render() {
    return (
      <div>
        <Box />
      </div>
    );
  }
}

ReactDOM.render(<Main />, document.getElementById("root"));

Answer 1

My CSS styling changed the z-index making the button unclickable. Changed position absolute to relative, works fine now.