class NoRepositories extends React.Component { render () { const repos = this.props.repos if(repos.length > 0){ return null } return <div>No Repositories Found</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() { if(this.state===null){ return null } if(!this.state.repos) { return <div>Loading...</div> } const onKeyUp = e => { const fRepos = this.state.repos.filter(x => x.name.match(e.target.value)) this.setState({fRepos}) } var content if(this.state.fRepos.length > 0) { content = ( <ul> {this.state.fRepos.map(x => <li key={x.id}>{x.name}</li>)} </ul> ) } return ( <div> <h3>{this.props.user}</h3> <input type="text" onKeyUp={onKeyUp} /> <NoRepositories repos={this.state.fRepos}/> {content} </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>