Skip to content

Instantly share code, notes, and snippets.

@johanneslumpe
Created June 12, 2014 12:17
Show Gist options
  • Save johanneslumpe/a3a7803e4643ca3f2884 to your computer and use it in GitHub Desktop.
Save johanneslumpe/a3a7803e4643ca3f2884 to your computer and use it in GitHub Desktop.
// this works fine
render: function() {
var content = [];
if (this.state.showResults && this.props.results.length) {
content.push(<ResultList results={this.props.results} onResultSelectAction={this.onResultSelectAction} />);
}
return (
<div className="searchbox-wrapper">
<input className="searchbox" type="text" onFocus={this.onFocusAction} onKeyPress={this.props.onTypeAction} placeholder="Search here..." />
<ReactCSSTransitionGroup transitionName="resultlist" component={React.DOM.div}>
{content}
</ReactCSSTransitionGroup>
</div>
);
}
// this will work when entering, but will throw an error when the component is re-rendered without the ResultList component
render: function() {
var content;
if (this.state.showResults && this.props.results.length) {
content = <ResultList results={this.props.results} onResultSelectAction={this.onResultSelectAction} />;
}
return (
<div className="searchbox-wrapper">
<input className="searchbox" type="text" onFocus={this.onFocusAction} onKeyPress={this.props.onTypeAction} placeholder="Search here..." />
<ReactCSSTransitionGroup transitionName="resultlist" component={React.DOM.div}>
{content}
</ReactCSSTransitionGroup>
</div>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment