title: REACT: Can´t pass parameter to a lifting up event handler
body: <p>I can´t pass the parameters from a child component to a parent component using the same event handler. </p>
  
  <p>My components' tree follows this structure:</p>
  
  <ul>
  <li>ProductList
  
  <ul>
  <li>ProductsGrid</li>
  <li>PaginationBar</li>
  </ul></li>
  </ul>
  
  <p>In the ProducList component I have this event handler</p>
  
  <pre><code>handlePagination = (index) =&gt; { bla bla bla }
  
  &lt;PaginationBar
    OnPagination={(index) =&gt; this.handlePagination(index)}
    pages={this.state.pages}
  /&gt;
  </code></pre>
  
  <p>In the Pagination Bar when I render the page.</p>
  
  <pre><code>  render() {
      return (
        &lt;nav aria-label="Catalog page navigation"&gt;
          &lt;ul className="pagination"&gt;
            &lt;li className={this.navButtonEnabled(0)} key="page-item-0"&gt;
              &lt;a
                className="page-link"
                onClick={this.props.OnPagination(0)}
                href="#"
                aria-label="Previous"
              &gt;
                &lt;span aria-hidden="true"&gt;Previous 3&lt;/span&gt;
              &lt;/a&gt;
            &lt;/li&gt;
            &lt;li className={this.navButtonEnabled(1)} key="page-item-1"&gt;
              &lt;a
                className="page-link"
                onClick={this.props.OnPagination(1)}
                href="#"
              &gt;
                &lt;span aria-hidden="true"&gt;
                  {this.navButtonDisplay(this.props.pages.navigation[1])}
                &lt;/span&gt;
              &lt;/a&gt;
            &lt;/li&gt;
            &lt;li className={this.navButtonEnabled(2)} key="page-item-2"&gt;
              &lt;a
                className="page-link"
                onClick={this.props.OnPagination(2)}
                href="#"
              &gt;
                &lt;span aria-hidden="true"&gt;
                  {this.navButtonDisplay(this.props.pages.navigation[2])}
                &lt;/span&gt;
              &lt;/a&gt;
            &lt;/li&gt;
            &lt;li className={this.navButtonEnabled(3)} key="page-item-3"&gt;
              &lt;a
                className="page-link"
                onClick={this.props.OnPagination(3)}
                href="#"
              &gt;
                &lt;span aria-hidden="true"&gt;
                  {this.navButtonDisplay(this.props.pages.navigation[3])}
                &lt;/span&gt;
              &lt;/a&gt;
            &lt;/li&gt;
            &lt;li className={this.navButtonEnabled(4)} key="page-item-4"&gt;
              &lt;a
                className="page-link"
                onClick={this.props.OnPagination(4)}
                href="#"
                aria-label="Next"
              &gt;
                &lt;span aria-hidden="true"&gt;Next 3&lt;/span&gt;
              &lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/nav&gt;
      );
    }
  }
  </code></pre>
  
  <p>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?</p>
  
  <p>This is the error presented in the console.</p>
  
  <p>react_devtools_backend.js:6 Warning: Cannot update during an existing state transition (such as within <code>render</code>). 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</p>
  
  <p>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.</p>