react: state vs props

state-vs-props.js

//-------------------------------Main (parent) component
var Main = React.createClass({
    // props: name (data)
    // state: counter (data) 
    
    getInitialState: function() {
    	return { counter: 0 };
    },
    handleClick: function() {
    	this.setState({ counter: ++this.state.counter });
    },
    render: function() {
        return (
            <div>
          	<div>Hello {this.props.name}</div>
            <Secondary onButtonClick={this.handleClick} 
                       counter ={this.state.counter}/>
          </div>
       );
    },
});

//------------------------------Secondary (child) component
var Secondary = React.createClass({
	// props: counter (data), onButtonClick (function reference)
    	// state: 
	render: function() {
        return (
          <div>
            <h1>counter: {this.props.counter}</h1>
            
            <button onClick={this.props.onButtonClick}>
              Click Me!
            </button>
          </div>
       );
    },
});

ReactDOM.render(
	<Main name="World" />,
    document.getElementById('container')
);