React

by pleinx

HTML

<div id="app"></div>

CSS

body {
  padding: 50px;
}

React

class ListenerApp extends React.Component {
	constructor() {
  	super();
    
    this.state = {
    	action: null
    };
  }

  render() {
  	const {color} = this.state;
    const style = {background: color};
  
    return (
     	<ExampleApp colorHasBeenChange={(color) => this.onColorChange(color)}/>
      {this.state.action}
    );
  }
  
  onColorChange(color) {
  		this.setState({action:
  }
}

class ExampleApp extends React.Component {
  constructor(props) {
    super(props);
    
    this.handleClick = this.handleClick.bind(this);
    
    this.state = {
    	color: null
    };
  }
  
  render() {
  	const {color} = this.state;
    const style = {background: color};
  
    return (
     	<button style={style} onClick={this.handleClick}>
     	    Click Me
     	</button>
    );
  }
  
  handleClick(e) {
  	const {colorHasBeenChange} = this.props;
  	const newColor = this.state.color === 'red' ? 'blue' : 'red';
  
    this.setState({color: newColor});
    colorHasBeenChange && colorHasBeenChange(newColor);
  }
}

ReactDOM.render(<ListenerApp/>, document.querySelector("#app"))