Show/Hide ReactJS components without losing their internal state?
One option would be to move the conditional inside the component itself:
Bio = React.createClass({ render: function() { if(this.props.show) { return <p>bio comp</p> } else { return null; } }});<Bio show={isBioPage} />Whether this is "best practise" or not probably depends on the exact situation.
Unfortunately, style={{display: 'none'}} trick only works on normal DOM element, not React component. I have to wrap component inside a div. So I don't have to cascade the state to subcomponent.
<div className="content"> <div className={this.state.curTab == 'securities' ? 'active' : ''}> <Securities /> </div> <div className={this.state.curTab == 'plugins' ? 'active' : ''}> <Plugins /> </div></div>