Communicate between React Components

Question

I'm just starting with React and it seems just beautifull to create user interfaces, however, I do have problem with communication between components.

I do have a very simple react component, representing a button:

import React from 'react';

export default class OfficeUIButton extends React.Component {

   constructor(props) {
     super(props);
     this.state = {
       active: false,
     };

     // Bind the event handlers.
     this.onMouseDownEventHandler = this.onMouseDownEventHandler.bind(this);
     this.onMouseUpEventHandler = this.onMouseUpEventHandler.bind(this);
   }

  onMouseDownEventHandler() {
    this.setState({
      active: true
    });
  }

  onMouseUpEventHandler() {
    this.setState({
      active: false
    });
  }

  render() {
    return  <div className={"officeui-button" + (this.state.active ? ' active': '')} onMouseDown={this.onMouseDownEventHandler} 
                 onMouseUp={this.onMouseUpEventHandler}>
              <span className="officeui-button-label">{this.props.text}</span>
            </div>
  }
}

This component has a state property named active. Based on the state, an additional class is added to the button.

Let's assume that I have 2 of these OfficeUIButton components on my page, how can I, by clicking the first button, make the second button active?

This is just a dummy example, but I need this for example for a modal popup, or for disabling buttons based on a certain action.

Thanks for the help.

[Lift the state up](https://facebook.github.io/react/docs/lifting-state-up.html). If multiple components somehow depend on each other, the state should be owned by one of their common ancestors. — Felix Kling, Dec 02 '16 at 08:12
Possible duplicate: [ReactJS Two components communicating](https://stackoverflow.com/questions/21285923/reactjs-two-components-communicating) — oklas, Dec 21 '17 at 14:37

Boky · Accepted Answer · 2016-12-02T08:30:16.457

1

You need then the state in a parent component which will control your buttons. You can do something like :

Button component, where you pass onClick prop and active prop

class Button extends React.Component {
    render(){
    let disabled = this.props.active ? "disabled" : "";
    return(
        <div><button onClick={this.props.onClick} disabled={disabled}>Button</button></div>
    )
  }
}

Then in your parent you need to have a state which you will pass to the button components and onClick function:

class Test extends React.Component {
    constructor(props){
        super(props);

      this.state = {
        active: false
      }
    }

    handleClick(event){ 
      this.setState({active: !this.state.active});
    }

    render(){
      return (
        <div>
            <Button onClick={this.handleClick.bind(this)}/>
            <Button active={this.state.active}/>
        </div>
      )
    }
}

React.render(<Test />, document.getElementById('container'));

Here is a fiddle.

Hope this helps.

edited Dec 02 '16 at 08:30

answered Dec 02 '16 at 08:07

Boky

11,554
28
93
163

I forgot to mention, what if there are no parent elements? – Complexity Dec 02 '16 at 09:17
1

Where would you than render the button component? – Boky Dec 02 '16 at 09:19
It is directly on the page, not inside another component. After some reading, I tought I need an event system such as Flux or is that a misunderstanding? – Complexity Dec 02 '16 at 09:19
You can then maybe use redux or you need to have parent component if you want that children components communicate with each other. I'm not sure if it's possible otherwise. – Boky Dec 02 '16 at 09:22
1

Thanks, I'll dive deeper into Redux. – Complexity Dec 02 '16 at 09:24

score 1 · Answer 2 · answered Dec 02 '16 at 08:15

You should in the higher component (let's asume for easy explanation that it is a page), where you will store a local store and where you will pass to each UIOFficeButton a function that would set this higher component state e.g. Button1Clicked on true, and also send that state to the other component.

class Test extends React.Component {
    constructor(props){
      super(props);
        this.state = {
          buttonOneClicked: false
        }
      }

handleClickButtonOne = () => this.setState({buttonOneClicked: true});

render(){
        return (
            <div>
               <OfficeUIButton onClick={this.handleClickButtonOne} />
               <OfficeUIButton disabled={this.state.buttonOneClicked} />
           </div>
       )
    }
}

Do not forget to actually handle that disabled and onClick props in your OfficeUIButton like in button

<button disabled={props.disabled} />

and do not use Span as a button.

use redux for such stuff because if they are in the same level then there is imply now real connection between each other. — Shiroo, Dec 02 '16 at 10:22

Communicate between React Components

2 Answers2