ReactJS - error passing an argument to a function
<p>I've got the following Reactjs code. It generates an inline menu (list of elements). If I click on a particular element, I'd like it to be output in console but it does not work.</p>

<pre><code>import React from "react";


export default class GalleryHeader extends React.Component {

  handleClick(cat) {
    console.log(cat);
  }
  createItems(items) {
    var output = [];
    for(var i = 0; i &lt; items.length; i++)
      output.push(&lt;li onClick={this.handleClick({items[i]})}&gt;{items[i]}&lt;/li&gt;);
    return output;
  }
  render() {

    return (
     &lt;ul class="list-inline"&gt;
      {this.createItems(this.props.menuItems)}
     &lt;/ul&gt;

    );
  }
}
</code></pre>

<p>There seems to be an error in calling the function </p>

<pre><code>{this.handleClick({items[i]})}
</code></pre>

<p>When I remove the function argument like below, it works fine:</p>

<pre><code>handleClick() {
    console.log("test");
  }
createItems(items) {
   var output = [];
   for(var i = 0; i &lt; items.length; i++)
     output.push(&lt;li onClick={this.handleClick}&gt;{items[i]}&lt;/li&gt;);
</code></pre>

<p>Please advise.</p>