CODEWITHSUNDEEP
javascriptreactjsreact-reduxevent-handlingdom-events
sme
sme

Reputation: 4163

Have siblings communicate via events

I need one sibling to respond when another sibling fires an event. Here is the parent component, which contains both siblings:

class ChatWindow extends Component {

    render() {
        return (
            <div className='ChatWindow'>
                <MessageList />
                <ChatBar onResize={this.handleChatBarResize.bind(this)} />
            </div>
        );
    }

    handleChatBarResize() {
        console.log('Chat bar resized');
        // Now I need to let MessageList know that the chat bar was resized
    }

}

When the Chat bar is resized, the handleChatBar() function is called after being bubbled up to ChatWindow. I then need to trigger an event in MessageList when handleChatBar() is called, preferably without using any globals.

Upvotes: 0

Views: 205

Answers (1)

Yossi
Yossi

Reputation: 445

Simple solution:

  1. Use state in conatiner conponent: state = { isChatBarResized : false }
  2. On handleChatBarResized() change state this.setState({ isChatBarResized : true })
  3. On render, pass to MessageList the flag from state: <MessageList isChatBarResized={this.state.isChatBarResized} />
  4. In MessageList.componentWillReciveProps() check if flag was changed, then do your stuff.

Don't forget to set back this.state.isChatBarResized after you finish your stuff. You can raise up an event that father container will catch and change there this flag.

Upvotes: 2

Related Questions