React - data between components

by ddrraaggaa

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

class Content extends React.Component {
 constructor(props) {
 	super(props)
  this.handleClick = this.handleClick.bind(this)
  this.state = {counter: 0}
 }
 handleClick(event) {
 	this.setState({counter: ++this.state.counter})
 }
 render() {
 	return (
  	<div className="container">
  	  <ClickCounterButton handler={this.handleClick}/>
      <br/> <br/>
      <Counter value={this.state.counter}/>
  	</div>
  )
 }
}

class ClickCounterButton extends React.Component {
	render() {
  	return <button
      onClick={this.props.handler}
      className="btn btn-info">
        Dont touch me with your dirty hands!
      </button>
  }
}

class Counter extends React.Component {
	render() {
  	return <span>Clicked {this.props.value} times.</span>
  }
}

ReactDOM.render(
  <Content />,
  document.getElementById('container')
);