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"));

this should work without any problem , check if there some erro in console ? — Bourbia Brahim
– Bourbia Brahim, Commented Mar 20, 2020 at 13:20
No errors in the console, just a webpack message: Waiting for update signal from WDS... — Drax
– Drax, Commented Mar 20, 2020 at 21:01
it only works if I place the component on its own, that is not as a child component in the box component... — Drax
– Drax, Commented Mar 20, 2020 at 21:22

Drax · Accepted Answer · 2020-03-20 21:45:31Z

2

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

answered Mar 20, 2020 at 21:45

Drax

1691 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to run React function within another component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related