State Best Practices
Wants to change the little triangle in front of the summary element. Will change with CSS.
var React = require('react');
var ContentToggle = React.createClass({
getInitialState () {
return {
showDetails: true;
};
},
renderDetails () {
var showStuff = this.state.showDetails;
if (showStuff) {
return this.props.children;
} else {
return null;
}
},
toggle () {
this.setState({
showDetails: !this.state.showDetails
});
}
render () {
// 1. ++++ Adds the CSS change state
var summaryClassName = "ContentToggle__Summary";
if(this.state.showDetails){
summaryClassName += " ContentToggle__Summary--open";
}
return (
<div className="ContentToggle">
// 2. ++++ Set dynamically the className
<div onClick={this.toggle} className="summaryClassName">{this.props.summary}</div>
<div className="ContentToggle__Details">{this.renderDetails()}</div>
</div>
);
}
});
var App = React.createClass({
render () {
return (
<div>
<ContentToggle summary="Jerk Chicken">
<p>Description text</p>
</ContentToggle>
</div>
)
}
});
React.render(<App/>, document.body);
Note about the BEM CSS syntax: don't concatenate the toggles. Don't use .ContentToggle__Summary--open
but .ContentToggle__Summary .ContentToggle__Summary--open
as above.Server rendering in React
Server is stateless rendering. For example in PHP, in a PHP file you query the data, iterate over it then send to the browser and never change it again.
Here in React it's the same case. Just iterate over data, build up the classnames, etc.
So because of this statelessness we can have these pages rendered on the server. We don't think about what if a
- Using setState vs using some local variable?states
property changes. You don't have to think about your UI over time. Modifying
state
causes the re-render. Otherwise the component will not re-render. React centralises the state. Every time you mutate the state of a component you have to call
setState
instead of assigning the value (this.state.showDetails = true
)This makes it easier to track changes to state, by simply doing a find in the code for the
setState
calls. If you change a parent component the children will re-render as well. However, if the data has not changed, it will only happen in the VirtualDOM.
Aside from the speed benefits, the user will not loose focus on an input element in re-render.
Talks about refs. (related to tabbed navigation). The example implementation is in the code on github.