Edit in JSFiddle

class NoRepositories extends React.Component {
	render () {
  	const repos = this.props.repos
  	if(repos.length > 0){
    	return null
    }
    return <div>No Repositories Found</div>
  }
}

class UnorderedList extends React.Component {
	render () {
  	const items = this.props.items
  	if(!items || items.length === 0){
    	return null
    }
    return (
    	<ul>
      	{items.map((x, i) => <li key={i}>{x}</li>)}
      </ul>
    )
  }
}

class Loading extends React.Component {
	render () {
  	if(this.props.repos){
    	return <div>{this.props.children}</div>
    }
  	return (
    	<div>Loading...</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>