const toArray = x => Array.prototype.slice.call(x) const renderIf = function () { const predicates = toArray(arguments) return component => { var prototype = component.prototype const render = prototype.render prototype.render = function () { return predicates.every(i => i(this)) ? render.call(this) : null } return component } } const NoRepositories = renderIf(x => x.props.repos.length === 0) (class NoRepositories extends React.Component { render () { return <div>No Repositories Found</div> } }) const UnorderedList = renderIf(x => x.props.items, x => x.props.items.length > 0) (class UnorderedList extends React.Component { render () { const items = this.props.items return ( <ul> {items.map((x, i) => <li key={i}>{x}</li>)} </ul> ) } }) const LoadingMessage = renderIf(x => !x.props.repos) (class LoadingMessage extends React.Component { render () { return <div>Loading</div> } }) const LoadingContent = renderIf(x => x.props.repos) (class LoadingContent extends React.Component { render () { return <div>{this.props.children}</div> } }) class Loading extends React.Component { render () { const repos = this.props.repos return ( <div> <LoadingMessage repos={repos}/> <LoadingContent repos={repos}> {this.props.children} </LoadingContent> </div> ) } } class Repositories extends React.Component { componentWillMount () { fetch(`https://api.github.com/users/${this.props.user}/repos`) .then(x => x.json()) // Create fRepos for filtered repos .then(x => this.setState({repos: x, fRepos: x})) // Set Initial State this.setState({filter: '', fRepos: []}) } render() { const onKeyUp = e => { const fRepos = this.state.repos.filter(x => x.name.match(e.target.value)) this.setState({fRepos}) } return ( <div> <Loading repos={this.state.repos}> <h3>{this.props.user}</h3> <input type="text" onKeyUp={onKeyUp} /> <NoRepositories repos={this.state.fRepos}/> <UnorderedList items={this.state.fRepos.map(x => x.name)}/> </Loading> </div> ); } } ReactDOM.render( <Repositories user="sindresorhus"/>, document.getElementById('container') );
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script> <div id="container"> <!-- This element's contents will be replaced with your component. --> </div>