Example of composition of React components in TypeScript

Pagination.tsx

import React, { Component } from 'react';
import { Pagination as ReactBootstrapPagination } from 'react-bootstrap';

interface PaginationProps extends ReactBootstrapPagination.PaginationProps {
  onPaginationItemClick: React.MouseEventHandler;
  totalPages: number;
  activePage: number;
}

export class Pagination extends Component<PaginationProps> {
  public render(): JSX.Element {
    const {
      totalPages,
      activePage,
      onPaginationItemClick,
      ...rest
    } = this.props;

    // http://2ality.com/2018/12/creating-arrays.html
    return (
      <ReactBootstrapPagination {...rest}>
        <ReactBootstrapPagination.Prev />
        {Array.from({ length: totalPages }).map((_, i) => (
          <ReactBootstrapPagination.Item
            key={i}
            active={activePage === i + 1}
            onClick={onPaginationItemClick}
          >
            {i + 1}
          </ReactBootstrapPagination.Item>
        ))}
        <ReactBootstrapPagination.Next />
      </ReactBootstrapPagination>
    );
  }
}