i wonder how i can pass as parameter to onClick function react list element

here is my list.

const items = this.state.tableData.items.map(
      (item, index) => <td key={index} onClick={this.getItem}>{item.name}</td>
    );

here is i define my function

constructor(props) {
    super(props);
    this.state = {
      tableData: this.props.items
    };
    this.getItem = this.getItem.bind(this);

  }

here is my function.

 getItem(item) {
    console.log(item)
  }

I wan't to get item details onClick to item where i render my list.

i tried to make onClick={this.getItem(item)} i get with this way item details but not at onClick. Just all items details console logged when i open my page.

what can i do ?

i wonder how i can pass as parameter to onClick function react list element

here is my list.

const items = this.state.tableData.items.map(
      (item, index) => <td key={index} onClick={this.getItem}>{item.name}</td>
    );

here is i define my function

constructor(props) {
    super(props);
    this.state = {
      tableData: this.props.items
    };
    this.getItem = this.getItem.bind(this);

  }

here is my function.

 getItem(item) {
    console.log(item)
  }

I wan't to get item details onClick to item where i render my list.

i tried to make onClick={this.getItem(item)} i get with this way item details but not at onClick. Just all items details console logged when i open my page.

what can i do ?

• javascript
• reactjs

• 4 Just use this : onClick={()=>this.getItem(params)} – punjira Commented Jun 10, 2019 at 7:06

3 Answers 3

There are two mon ways: Using an arrow function, or using bind:

Arrow function:

const items = this.state.tableData.items.map(
  (item, index) => <td key={index} onClick={e => this.getItem(item, e)}>{item.name}</td>
);

bind:

const items = this.state.tableData.items.map(
  (item, index) => <td key={index} onClick={this.getItem.bind(this, item)}>{item.name}</td>
);

In both cases, with the above, getItem would get the item as its first argument, the event object as its second.

This is just an alternative answer. Separating the item into its own ponent would be an alternative. In this way, you can pass the onClick function without binding it then use it in the Item ponent like this.

const items = [{ id: 1, name: "foo" }, { id: 2, name: "bar" }];

const Item = ({ item, getItem}) => {
  const handleClick = () => getItem(item);
  return (
    <div onClick={handleClick}>{item.name}</div>
  )
}

const App = () => {
  const getItem = item => console.log(item.id);
  return (
    <div className="App">
      {items.map(item => (
        <Item key={item.id} item={item} getItem={getItem} />
      ))}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare./ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />

If there are so many items you can avoid rerendering all the items if none of their props changed since you don't use bind or any inline arrow function. But, as you can see it needs a separate ponent and some more coding.

Functional Components are going to win over classes. So better to be used with this:

      onClick={  ( item.id) => handleclick( item.id, [...])

Edit 1 Handleclick here intended as a Hook ( e. G. SetValue on useState).

Nb: On purpose code dirty to fight against the awful copypasta SO practice. Thanks redditors. Read the code, then read the memes.