Simple pagination for Meteor and ReactJS

Question

I have this code,

renderMsg(){
    return this.props.msgList.map((item) => {
            return (
                <tr key={item._id} id={item._id} className={(item.status == "unread")? "unread":""}>
                      <td className="inbox-small-cells">
                          <input type="checkbox" className="mail-checkbox" />
                      </td>
                  </tr>
            );

    });
}

I would like to add pagination for this renderMsg function. This function will output list of table rows.

So for example, this function will display only first 50. then the user can select the next page. then it will display number 51- 100 of the list.

How can I make it?

Answer 1

Put the currentPageIndex into the your component state and slice your array before mapping it. Assuming you use a 0 based index:

const { currentPage } = this.state;
const { msgList, pageSize } = this.props;
msgList
  .slice(currentPage * pageSize, (currentPage + 1) * pageSize)
  .map(item => ....