Cacher is the code snippet organizer for pro developers

///// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './HelloWorld';

ReactDOM.render(<HelloWorld name='Meeka' />, document.getElementById('container')); 


///// HelloWorld.js


import React from 'react';
import Buttons from './Buttons';

export default React.createClass({
  getInitialState() {
    return { counter: 0 }
  },
  handleButtonClick(number) {
    let newNumber = this.state.counter + number;
    this.setState({ counter: newNumber });
  },
  render() {
    console.log('props in HW', this.props);
    console.log('props in HW', this.props);
    return (
      <div>
        <h1>Hello, {this.props.name}!</h1>
        <h1>Counter: {this.state.counter}</h1>
        <Buttons handleClickInButtons={this.handleButtonClick} counter={this.state.counter} />
      </div>
    );
  },
});


///// Buttons.js 


import React from 'react';

export default React.createClass({
  handleClick(number) {
    console.log('number', number);
    this.props.handleClickInButtons(number);
  },
  render() {
    console.log('props in Buttons', this.props);
    console.log('state in Buttons', this.state);
    return (
      <div>
        <button onClick={this.handleClick.bind(this, 5)}>Add 5</button>
        <button onClick={this.handleClick.bind(this, 10)}>Add 10</button>
        <button onClick={this.handleClick.bind(this, -4)}>Subtract 4</button>
        <h1>Counter in Buttons: {this.props.counter}</h1>
      </div>
    );
  },
});