REACT: Can´t pass parameter to a lifting up event handler - reactjs

Question

I can´t pass the parameters from a child component to a parent component using the same event handler.
My components' tree follows this structure:
ProductList
ProductsGrid
PaginationBar
In the ProducList component I have this event handler
handlePagination = (index) => { bla bla bla }
<PaginationBar
OnPagination={(index) => this.handlePagination(index)}
pages={this.state.pages}
/>
In the Pagination Bar when I render the page.
render() {
return (
<nav aria-label="Catalog page navigation">
<ul className="pagination">
<li className={this.navButtonEnabled(0)} key="page-item-0">
<a
className="page-link"
onClick={this.props.OnPagination(0)}
href="#"
aria-label="Previous"
>
<span aria-hidden="true">Previous 3</span>
</a>
</li>
<li className={this.navButtonEnabled(1)} key="page-item-1">
<a
className="page-link"
onClick={this.props.OnPagination(1)}
href="#"
>
<span aria-hidden="true">
{this.navButtonDisplay(this.props.pages.navigation[1])}
</span>
</a>
</li>
<li className={this.navButtonEnabled(2)} key="page-item-2">
<a
className="page-link"
onClick={this.props.OnPagination(2)}
href="#"
>
<span aria-hidden="true">
{this.navButtonDisplay(this.props.pages.navigation[2])}
</span>
</a>
</li>
<li className={this.navButtonEnabled(3)} key="page-item-3">
<a
className="page-link"
onClick={this.props.OnPagination(3)}
href="#"
>
<span aria-hidden="true">
{this.navButtonDisplay(this.props.pages.navigation[3])}
</span>
</a>
</li>
<li className={this.navButtonEnabled(4)} key="page-item-4">
<a
className="page-link"
onClick={this.props.OnPagination(4)}
href="#"
aria-label="Next"
>
<span aria-hidden="true">Next 3</span>
</a>
</li>
</ul>
</nav>
);
}
}
In the onClick event, I call the event handler with the index number (this is the parameter I want to pass), according the button clicked I render correctly the ProductsGrid. But it doesn't work at all, I tried several approaches, I just want to pass a number via a parameter for a lifting up event handler. What am I doing wrong?
This is the error presented in the console.
react_devtools_backend.js:6 Warning: Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state.
in Pagination (created by Catalog)
in Catalog (created by App)
in main (created by App)
in App
I am not changing any state during the render process, the event handler changes the status, when the button is clicked. This is not a render process.

Answer 1

Please replace
onClick={this.props.OnPagination(0)}
With
onClick={() => {this.props.OnPagination(0)}}
Here is complete code (I have commented some code so that I can run this easily to my end):
import React from "react";
export default class ProductList extends React.Component {
handlePagination = (index) => {
console.log(index, 'index');
};
render() {
return (
<PaginationBar OnPagination={(index) => this.handlePagination(index)}
// pages={this.state.pages}
/>
);
}
}
class PaginationBar extends React.Component {
render() {
return (
<nav aria-label="Catalog page navigation">
<ul className="pagination">
<li key="page-item-0">
<a
className="page-link"
onClick={() => {this.props.OnPagination(0)}}
href="#"
aria-label="Previous"
>
<span aria-hidden="true">Previous 3</span>
</a>
</li>
<li key="page-item-1">
<a
className="page-link"
onClick={() => {this.props.OnPagination(1)}}
href="#"
>
<span aria-hidden="true">
{/*{this.navButtonDisplay(this.props.pages.navigation[1])}*/}
Previous 2
</span>
</a>
</li>
<li key="page-item-2">
<a
className="page-link"
onClick={() => {this.props.OnPagination(2)}}
href="#"
>
<span aria-hidden="true">
{/*{this.navButtonDisplay(this.props.pages.navigation[2])}*/}
Previous 1
</span>
</a>
</li>
<li key="page-item-3">
<a
className="page-link"
onClick={() => {this.props.OnPagination(3)}}
href="#"
>
<span aria-hidden="true">
{/*{this.navButtonDisplay(this.props.pages.navigation[3])}*/}
Next 2
</span>
</a>
</li>
<li key="page-item-4">
<a
className="page-link"
onClick={() => {this.props.OnPagination(4)}}
href="#"
aria-label="Next"
>
<span aria-hidden="true">Next 3</span>
</a>
</li>
</ul>
</nav>
);
}
}