React Shelf component for displaying GitHub repos for given user

shelf.jsx

class Shelf extends React.Component {
  componentDidMount () {
    this.intervals = [];
  }
  componentWillUnmount () {
    this.intervals.map(clearInterval);
  }
  setInterval () {
     this.intervals.push(setInterval.apply(null, arguments));
  }
  renderStats (user, repo) {
    return (
      <div className="c-shelf-repo__stats">
        {['watch', 'fork', 'follow'].map((type) => {
          let btnUrl = `https://ghbtns.com/github-btn.html?user=${user}&repo=${repo}&type=${type}&count=true`;
          return (
            <iframe height="20" allowtransparency="true" src={ btnUrl }/>
          )
        })}
      </div>
    )
  }
  changeRepo() {
    const $shelf = this.refs.myShelf;
    let $activeRepo = $shelf.querySelector('.c-shelf-repo--active');
    $activeRepo.className = 'c-shelf-repo c-shelf-repo--inactive';
    let $next = ($activeRepo.nextElementSibling) ? $activeRepo.nextElementSibling: $shelf.children[0];
    $next.className = 'c-shelf-repo c-shelf-repo--active';
  }
  renderData () {
    const { data } = this.props;
    return data.map((repo, idx) => {
      const className = (idx === 0) ? 'c-shelf-repo c-shelf-repo--active': 'c-shelf-repo';
      return (
        <li className={ className } key={ idx }>
					<div className="c-shelf-repo__details">
	          <h1 className="c-shelf-repo__name">{ repo.name }</h1>
  	        <p className="c-shelf-repo__description">{ repo.description }</p>
					</div>
          { (repo.owner) ? this.renderStats(repo.owner.login, repo.name): null }
        </li>
      )
    })
  }
  render () {
    if (this.props.data && this.props.data.length > 0) {
      if (this.intervals) this.intervals.map(clearInterval);
      this.setInterval(this.changeRepo.bind(this), this.props.interval);
      return (
        <ul className="c-shelf" ref="myShelf">
          { this.renderData() }
        </ul>
      )
    } else if (this.props.data) {
      return (
        <div>loading...</div>
      )
    } else {
      return (
        <span></span>
      )
    }
  }
}
class App extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      shelfSize: 5,
      shelfInterval: 6000
    };
  }
  updateUser () {
    const userInput = document.querySelector('.app-user-input');
    this.setState({
      user: userInput.value,
      repos: []
    });
    axios.get(`https://api.github.com/search/repositories?q=user:${userInput.value}&sort=stars&per_page=${this.state.shelfSize}`)
      .then((data) => {
        this.setState({
          repos: data.data.items,
          user: null
        });
      })
  }
  render () {
    return (
      <div className="app-container">
        <Shelf
          data={(this.state.repos) ? this.state.repos: null}
          interval={ this.state.shelfInterval }
         ></Shelf>
        <input className="app-user-input" placeholder="github user handle" value={ this.state.user }/><br/>
        <button className="app-user-change" onClick={this.updateUser.bind(this)}>Update user</button>
      </div>
    )
  }
}
React.render(
  <App></App>,
  document.getElementById('app')
);