Render Function Automatically Trigger Onclick Props Function Issue In React?

In parent component have one child component. In Child component I have one props with click function. In that click function, triggering before click while rendering component. I

Solution 1:

change this in your child component while your using click function inside render user arrow function

onPageChange={(e) =>this.handlePageClick()}

Solution 2:

In your Pagination component render

Change

onPageChange={this.handlePageClick}

To

onPageChange={e => this.handlePageClick(e)}

Corrected code below

importReact, { Component } from"react";
importReactPaginatefrom'react-paginate';
import { ORIGIN_PATH } from"./../../../utilities/consts";
import"./Pagination.css";

classPaginationextendsComponent {

    handlePageClick = (e) => {
        this.props.rowClick(e.selected)
    }

    render() {

        const { range, initial } = this.props;

        let { count, total } = this.props;

        count = count + 10;
        total = parseInt(total, 10);

        if(count===0 && total < 10) {
            count = total
        } elseif(count >= total) {
            count = total
        }

        return(
            <divclassName="pagination-block"><p>Showing {count} out of {total} results</p>
                {<ReactPaginatepreviousLabel={<imgsrc={ORIGIN_PATH + "/images/icons/polygon-prev-icon@3x.png"} alt="Prev" />}
                    nextLabel={<imgsrc={ORIGIN_PATH + "/images/icons/polygon-next-icon@3x.png"} alt="Next" />}
                    breakLabel={<ahref="">...</a>}
                    breakClassName={"break-me"}
                    pageCount={total/range}
                    marginPagesDisplayed={2}
                    pageRangeDisplayed={range}
                    onPageChange={e => this.handlePageClick(e)}
                    containerClassName={"pagination"}
                    subContainerClassName={"pages pagination"}
                    initialPage={initial}
                    activeClassName={"active"} />}
            </div>
        )
    }
}

exportdefaultPagination;