React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.arrow-up {
          width: 0;
          height: 0;
          border-left: 4px solid transparent;
          border-right: 4px solid transparent;
          border-bottom: 4px solid #3A5071;
          margin-bottom: 2px;
          cursor: pointer;
        }
        .arrow-down {
          width: 0;
          height: 0;
          border-left: 4px solid transparent;
          border-right: 4px solid transparent;
          border-top: 4px solid #3A5071;
          cursor: pointer;
        }

Babel + JSX

const data = [
  {
    "id": 1,
    "firstName": "Bill",
    "lastName": "Gates",
    "dateOfBirth": "1.7.1990 11:35",
    "company": "Cloud",
    "note": 90
  },
  {
    "id": 4,
    "firstName": "Steve",
    "lastName": "Jobs",
    "dateOfBirth": "4.02.1976 14:37",
    "company": "Cloud",
    "note": 91
  },
  {
    "id": 2,
    "firstName": "Jeff",
    "lastName": "Bezos",
    "dateOfBirth": "28.10.1950 2:15",
    "company": "Fireair",
    "note": 27
  },
  {
    "id": 3,
    "firstName": "Larry",
    "lastName": "Page",
    "dateOfBirth": "03.01.1963 23:10",
    "company": "Marsecuriy",
    "note": 50
  },
  {
    "id": 5,
    "firstName": "Michael",
    "lastName": "Jackson",
    "dateOfBirth": "10.10.1910 18:00",
    "company": "Arcanewell",
    "note": 77
  },
  {
    "id": 6,
    "firstName": "John",
    "lastName": "Smith",
    "dateOfBirth": "29.02.1936 11:35",
    "company": "Dwarfex",
    "note": 8
  },

  {
    "id": 7,
    "firstName": "Jan",
    "lastName": "Kowalski",
    "dateOfBirth": "14.11.1972 06:35",
    "company": "Wolfoods",
    "note": 25
  },
  {
    "id": 8,
    "firstName": "Jenna",
    "lastName": "Hicks",
    "dateOfBirth": "23.05.1993 16:15",
    "company": "Primedia",
    "note": 19
  },
  {
    "id": 9,
    "firstName": "Elvis",
    "lastName": "Presley",
    "dateOfBirth": "09.01.1935 01:35",
    "company": "Bluffoods",
    "note": 8
  }
]


class Hello extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: data,
            currentPage: 1,
            usersPerPage: 5
        };
    }

    handlePages = (e) => {
        this.setState({
            currentPage: Number(e.target.id)
        });
    };

    handleNext = () => {
        this.state.currentPage === 2 ? this.setState({currentPage: 1}) : this.setState({currentPage: this.state.currentPage + 1})
    };

    handleBack = () => {
        this.state.currentPage === 1 ? this.setState({currentPage: 2}) :...