React setState and render

by Denys Biliaiev

HTML

<script src="https://npmcdn.com/[email protected]/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/react-dom.js"></script>
<div id="root"></div>

Babel + JSX

class Component extends React.Component {
  constructor(props, context) {
    super(props, context)
    this.state = { active: 0 }
    this.onClick = this.onClick.bind(this)
  }
  
  onClick() {
    this.setState(state => { active: state.active++ },
		() => console.log('update')	
	)
  }

  render() {
  console.log('render')
    return <div>
      <button onClick={this.onClick}>Click me</button>
      <p>Active: {this.state.active}</p>
    </div>
  }
}

ReactDOM.render(
  <Component />,
  document.getElementById('root')
)