I have ponent A and B. Component A pass state as prop to ponent, says it's named show

so in my ponent B's render function it will be like this

{this.props.show &&
   <div>popup content</div>
}

But how I close it now? I have to pass a flag from ponent B to the parent? as I know it react you can pass stuff back to parent.

I have ponent A and B. Component A pass state as prop to ponent, says it's named show

so in my ponent B's render function it will be like this

{this.props.show &&
   <div>popup content</div>
}

But how I close it now? I have to pass a flag from ponent B to the parent? as I know it react you can pass stuff back to parent.

• javascript
• reactjs

• Possible duplicate of How to pass data from child ponent to its parent in ReactJS? – Shubham Khatri Commented Mar 21, 2017 at 3:26
• 1 found a nice article about munication between react ponents ctheu./2015/02/12/… – imdzeeshan Commented May 18, 2017 at 20:54

2 Answers 2

In order to pass data from a child to a parent, the parent needs to pass a function capable of handling that data to the child.

var Parent = React.createClass({

    getData: function(data){
         this.setState({childData: data});     
    }

    render: function(){
        return(
            <Child sendData={this.getData} />
        );
    }

});

var Child = React.createClass({

    textChange: function(event){
        this.setState({textString: event.target.value});
    }

    buttonClick: function(){
        this.props.sendData(this.state.textString);
    }

    render: function(){
        <div>
        <input type="text" value={this.state.textString} 
               onChange={this.textChange}/>
        <button onClick={this.buttonClick}
        </div>
    }

});

There are other ways of handling data, and it might be worth your while creating a data store to store global variables and handle various events. In this way you would keep the data flow of your application one way. In smaller scale cases however, this solution should suffice.

Use the eventBus to send/receive date from child/parent ponents respectively.

Example below:

class Date extends Component {

 constructor(props) {
    super(props);
    this.state = {
        date:'',           
}
   this.callback = this.callback.bind(this); // register callback method
}

callback(date){    // callback method to receive data
    this.setState({date: date});
}


ponentDidMount(){
    EventBus.on("date", this.callback);
}
render() {

<div>
      {this.state.date}
</div>
  }
} 

From any other ponent

 handleDayClick(day) {
         EventBus.publish("date", day);
  }

https://github./arkency/event-bus