var MyComponent = React.createClass({
getInitialState: function(){
return {
count: 5
}
},
render: function(){
return (
<h1>{this.state.count}</h1>
)
}
});
The getInitialState method enables to set the initial state value, that is accessible
inside the component via this.state.
getInitialState: function(){
return { /* something here */};
}
Analogously getDefaultProps can be used to define any default props which can be
accessed via this.props.
getDefaultProps: function(){
return { /* something here */};
}
**componentWillMount is called before the render method is executed ***
It is important to note that setting the state in this phase will not trigger a re-rendering
var Counter = React.createClass({
incrementCount: function(){
this.setState({
count: this.state.count + 1
});
},
getInitialState: function(){
return {
count: 0
}
},
render: function(){
return (
<div class="my-component">
<h1>Count: {this.state.count}</h1>
<button type="button" onClick={this.incrementCount}>Increment</button>
</div>
);
}
});
ReactDOM.render(<Counter/>, document.getElementById('mount-point'));