Как сдвинуть элементы с экрана в реакции?

Question

В настоящее время я делаю свое собственное портфолио , и я не нашел подходящего способа сделать так, чтобы "раздел коммитов github" скользил со страницы при нажатии любой из этих 2 стрелок

Я знаю, что мне нужно изменить или перевести мои элементы списка вправо / влево, но не понимаю, как остановить его, когда он попадает в первый / последний элемент.И я думаю, что я должен использовать состояние в моем компоненте GithubCommits, чтобы сделать это тоже.

Вот код:

class GithubSection extends Component {
render() {
    const commits = this.state.commits.map(commit => (
      <GithubCommit
        key={commit.node_id}
        name={commit.author.login}
        email={commit.commit.author.email}
        date={commit.commit.author.date}
        avatarUrl={commit.author.avatar_url}
        profileUrl={commit.author.html_url}
        commitMessage={commit.commit.message}
      />
    ));

    return (
      <div id="github-section">
        <div className="arrow-left" onClick={this.handleClick}>
          <FontAwesomeIcon icon="arrow-left" style={styles.Icon} />
        </div>
        <ul>{commits}</ul>
        <div className="arrow-right" onClick={this.handleClick}>
          <FontAwesomeIcon icon="arrow-right" style={styles.Icon} />
        </div>
      </div>
    );
  }
}

Спасибо!