React中的分页活动课程

Question

I've made a pagination, everything works, but I don't know how to set active class on single page.

This is my example:

Pagination code:

    const renderPagination = numbers.map(number => {
        return (
            <li className="controls" key={number} id={number} onClick={this.handlePages}>
                {number}
            </li>
        );
    });

Full example:

codepen

Answer 1

<li className={(this.state.currentPage === number ? 'active ' : '') + 'controls'} key={number} id={number} onClick={this.handlePages}>
  {number}
</li>

You can add class when state equal number

https://codepen.io/titan_dl_1904/pen/XYbjye

Answer 2

Since the currentPage is in the state you can grab it from there and compare it to the number of the page link you are displaying

    const renderPagination = numbers.map(number => {
        var activeClass = this.state.currentPage === number ? 'active' : '';
        return (
            <li className={`controls ${activeClass}`} key={number} id={number} onClick={this.handlePages}>
                {number}
            </li>
        );
    });

Updated demo ( with some styling too ): https://codepen.io/gpetrioli/pen/MXwbYv