paginate.js

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";

class App extends React.Component {
  state = {
    data: [],
    numberPaginate: 1,
    position: 0,
    dataFinal: []
  };

  async componentDidMount() {
    const res = await fetch("https://jsonplaceholder.typicode.com/posts");
    const data = await res.json();
    const numberPaginate = Math.round(data.length / 6);

    this.setState({
      data: data,
      numberPaginate: numberPaginate
    });
  }

  clickHandler = angkaPosition => {
    const banyakDataYangDiTampilkan = angkaPosition * 6;
    const dataFinal = this.state.data.slice(
      (angkaPosition - 1) * 6,
      banyakDataYangDiTampilkan + 1
    );
    this.setState({
      dataFinal,
      position: angkaPosition
    });
  };

  createPaginate = numberPaginate => {
    let pag = [];
    for (let i = 1; i <= numberPaginate; i++) {
      pag.push(<span onClick={() => this.clickHandler(i)}>{i}</span>);
    }
    return pag;
  };

  render() {
    const { numberPaginate, position, dataFinal } = this.state;
    return (
      <div>
        <div>
          {dataFinal.map(datum => {
            return (
              <div>
                <ul>
                  <li>{datum.id}</li>
                  <li>{datum.title}</li>
                </ul>
              </div>
            );
          })}
        </div>
        <div className="flexKu">{this.createPaginate(numberPaginate)}</div>
        <div>
          <br />
          {position}
        </div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);