How to pass eventhandler to sibling component?

Question

I have an eventHandler and I want it's sibling component to handle it. There are a lot of properties (e.g. this.randomNumber = 555 inside constructor) inside <Brains /> which are needed for onLeftLeftMove to handle the event.

render( ) {
  <div>
    <LeftControl onTouchMove={this.onLeftMove} />
    <Brains ..wants to handle onLeftMove because onLeftMove needs access to a lot of properties inside Brains.. />
  </div>
}

How to do this?

Possible duplicate of [React.js - Communicating between sibling components](https://stackoverflow.com/questions/36143767/react-js-communicating-between-sibling-components) — Randy Casburn, May 14 '18 at 16:44

score 3 · Answer 1 · answered May 14 '18 at 16:43

3

You need to lift the state up. Which means common ancestor - the one which renders LeftControl and Brains - will hold all the information that will be required by them both.

answered May 14 '18 at 16:43

Tomasz Mularczyk

34,501
19
112
166

I can't lift state up in this specific case. – J. Reku May 14 '18 at 16:45
@J.Reku Why not? You usually can – Ruan Mendes May 14 '18 at 17:12

How to pass eventhandler to sibling component?

1 Answers1