[table] onChangePage from TablePagination is returning an undefined page

[victorarbuesmallada]

I'm using Typescript with a Table component and the event handler onChangePage on the TablePagination component is passing an undefined page value.

• This is a v1.x issue (v0.x is no longer maintained).
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

onChangePage should return the current page number.

Current Behavior

onChangePage is passing an undefined page, making a paginated table to not change page.

Context

import * as React from "react";
import "./redirect-list.scss";
import { RedirectsView } from "../../models/redirect";
import Redirect from "./redirect";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import TableFooter from "@material-ui/core/TableFooter";
import TablePagination from "@material-ui/core/TablePagination";
import Paper from "@material-ui/core/Paper";

interface RedirectListProperties { redirects?: RedirectsView; }
class RedirectListState { page: number; rowsPerPage: number; }
export default class RedirectList extends React.Component<RedirectListProperties, RedirectListState> {
    constructor(props: RedirectListProperties) {
        super(props);
        this.state = {
            page: 0,
            rowsPerPage: 5
        };
    }

    handleChangePage = (event: any, page: number) => {
        this.setState({ page });
    };

    private handleChangeRowsPerPage = (event: any) => {
        this.setState({ rowsPerPage: event.target.value });
    };

    private createTable() {
        const redirects: RedirectsView = this.props.redirects;
        const { rowsPerPage, page } = this.state;
        return (
            <Paper>
                <Table>
                    <TableHead>
                    <TableRow>
                        <TableCell>Url</TableCell>
                        <TableCell>Target Url</TableCell>
                        <TableCell>User</TableCell>
                        <TableCell>Date</TableCell>
                    </TableRow>
                    </TableHead>
                    <TableBody>
                    {redirects.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map(redirect => {
                        return (
                        <TableRow key={redirect.url}>
                            <TableCell component="th">
                            {redirect.url}
                            </TableCell>
                            <TableCell>{redirect.targetUrl}</TableCell>
                            <TableCell>{redirect.user}</TableCell>
                            <TableCell>{new Date(redirect.lastModified).toLocaleString()}</TableCell>
                        </TableRow>
                        );
                    })}
                    </TableBody>
                    <TableFooter>
                        <TableRow>
                            <TablePagination
                                count={redirects.length}
                                rowsPerPage={rowsPerPage}
                                page={page}
                                onChangePage={this.handleChangePage}
                                onChangeRowsPerPage={this.handleChangeRowsPerPage}
                            />
                        </TableRow>
                    </TableFooter>
                </Table>
            </Paper>
        );
    }

    private displayRedirects() {
        const entries: RedirectsView = this.props.redirects;
        return entries && entries.length > 0 ?
            this.createTable() :
            "No redirect entries found";
    }

    render() {
        return (
            <div>
                {this.displayRedirects()}
            </div>
        );
    }
}

Your Environment

Tech	Version
Material-UI	v1.2.1
React	^16.4.0
browser	Chrome
Typescript	^2.9.1

[victorarbuesmallada]

Nevermind, user error...