Edit in JSFiddle

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 isEmpty = _.curry((p, i) => _.get(i, p + '.length') === 0)
const have = _.curry((p, i) => Boolean(_.get(i, p + '.length')))
const notHave = _.curry((p, i) => !have(p, i))
const isntEmpty = _.curry((p, i) => !isEmpty(p, i))

const NoRepositories = renderIf(isEmpty('props.repos'))
  (class NoRepositories extends React.Component {
    render() {
      return <div>No Repositories Found</div>
    }
  })
	
const UnorderedList = renderIf(isntEmpty('props.items'))
  (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(notHave('props.repos'))
  (class LoadingMessage extends React.Component {
    render() {
      return <div>Loading</div>
    }
  })
	
const LoadingContent = renderIf(have('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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.0.0/lodash.js"></script>
<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>