By user1924375


2015-04-22 23:40:14 8 Comments

I want to read the onClick event value properties. But when I click on it, I see something like this on the console:

SyntheticMouseEvent {dispatchConfig: Object, dispatchMarker: ".1.1.0.2.0.0:1", nativeEvent: MouseEvent, type: "click", target

My code is working correctly. When I run I can see {column} but can't get it in the onClick event.

My Code:

var HeaderRows = React.createClass({
  handleSort:  function(value) {
    console.log(value);
  },
  render: function () {
    var that = this;
    return(
      <tr>
        {this.props.defaultColumns.map(function (column) {
          return (
            <th value={column} onClick={that.handleSort} >{column}</th>
          );
        })}
        {this.props.externalColumns.map(function (column) {
          // Multi dimension array - 0 is column name
          var externalColumnName = column[0];
          return ( <th>{externalColumnName}</th>);
        })}
      </tr>
    );
  }
});

How can I pass a value to the onClick event in React js?

30 comments

@Austin Greco 2015-04-22 23:43:29

Easy Way

Use an arrow function:

return (
  <th value={column} onClick={() => this.handleSort(column)}>{column}</th>
);

This will create a new function that calls handleSort with the right params.

Better Way

Extract it into a sub-component. The problem with using an arrow function in the render call is it will create a new function every time, which ends up causing unneeded re-renders.

If you create a sub-component, you can pass handler and use props as the arguments, which will then re-render only when the props change (because the handler reference now never changes):

Sub-component

class TableHeader extends Component {
  handleClick = () => {
    this.props.onHeaderClick(this.props.value);
  }

  render() {
    return (
      <th onClick={this.handleClick}>
        {this.props.column}
      </th>
    );
  }
}

Main component

{this.props.defaultColumns.map((column) => (
  <TableHeader
    value={column}
    onHeaderClick={this.handleSort}
  />
))}

Old Easy Way (ES5)

Use .bind to pass the parameter you want, this way you are binding the function with the Component context :

return (
  <th value={column} onClick={this.handleSort.bind(this, column)}>{column}</th>
);

@user1924375 2015-04-23 09:13:10

react gives warning when i use like your code. I change my code to onClick={that.onClick.bind(null,column)}

@ibiza 2015-08-11 02:25:32

do you have the official doc reference for that function? I can't find it too many libraries are found for the bind keyword...

@Austin Greco 2015-08-12 09:02:01

bind is part of regular javascript (ES5) -- check out the docs for .bind on MDN

@Simon H 2015-10-24 09:43:23

How would you use this with a <a> tag where you need to pass the event, in order to use preventDefault()

@smudge 2015-11-04 17:26:46

@SimonH The event will be passed as the last argument, after the arguments you pass via bind.

@vipin8169 2016-05-13 14:21:19

how to do this in coffeescript?

@AndrewMcLagan 2016-05-17 07:44:26

Is this not bad for performance? wont a new function be created on each render?

@E. Sundin 2016-07-03 22:46:03

@AndrewMcLagan It is. I found this to describe the rule and the most performant solution.

@NeverEndingQueue 2016-11-04 08:35:12

@E.Sundin How do you pass a dynamic argument to the function using that approach?

@aaronofleonard 2017-03-02 22:27:10

@NeverEndingQueue Based on the section in that article "Protips - List of Items", you pass whatever you want as an argument down as a prop, then have the function pass it back up. It may seem cumbersome, but that is the most efficient way performance-wise. Or, just take the performance hit and use bind.

@Alex Shwarc 2017-04-11 16:37:35

This answer is totally wrong. If you use it you will get new function reference inside onClick={() => this.handleSort(column)} every time and each render DOM will be different and react will have to to update it. It breaks React reconciliation.

@Félix Gagnon-Grenier 2018-05-14 17:39:11

@AlexShwarc yes, that's why there is the "better way" section of the answer, that does not create a new function every render :)

@hannad rehman 2018-09-16 14:05:10

dont use bind. it returns a new function every time render is called. it is same as creating a anonymous function which is created everytime render gets called

@Sodbileg Gansukh 2018-11-23 00:13:24

Thanks for providing a "Better Way". This was very useful.

@Mohan Rajput 2019-02-07 11:27:46

Thanks, that the perfect way to pass the value in an event.

@msqar 2019-11-25 16:04:23

Binding functions on render is a bad decision!

@Lijomon C John 2020-05-28 19:39:14

This one is better. Worked for me.

@AndroidDev 2020-06-12 07:18:39

Easy way: 3 lines of code. Better way: 13 lines of code. Guess who wins?

@Umair Ahmed 2019-08-30 14:11:56

There are couple of ways to pass parameter in event handlers, some are following.

You can use an arrow function to wrap around an event handler and pass parameters:

<button onClick={() => this.handleClick(id)} />

above example is equivalent to calling .bind or you can explicitly call bind.

<button onClick={this.handleClick.bind(this, id)} />

Apart from these two approaches, you can also pass arguments to a function that is defined as a curry function.

handleClick = (id) => () => {
    console.log("Hello, your ticket number is", id)
};

<button onClick={this.handleClick(id)} />

@Romel Gomez 2020-02-13 21:19:26

Use a closure, it result in a clean solution:

<th onClick={this.handleSort(column)} >{column}</th>

handleSort function will return a function that have the value column already set.

handleSort: function(value) { 
    return () => {
        console.log(value);
    }
}

The anonymous function will be called with the correct value when the user click on the th.

Example: https://stackblitz.com/edit/react-pass-parameters-example

@Ganesh Koilada 2020-02-09 05:53:33

You just need to use Arrow function to pass value.

<button onClick={() => this.props.onClickHandle("StackOverFlow")}>

Make sure to use () = >, Otherwise click method will be called without click event.

Note : Crash checks default methods

Please find below running code in codesandbox for the same.

React pass value with method

@SlimSim 2017-08-19 18:03:46

I wrote a wrapper component that can be reused for this purpose that builds on the accepted answers here. If all you need to do is pass a string however, then just add a data-attribute and read it from e.target.dataset (like some others have suggested). By default my wrapper will bind to any prop that is a function and starts with 'on' and automatically pass the data prop back to the caller after all the other event arguments. Although I haven't tested it for performance, it will give you the opportunity to avoid creating the class yourself, and it can be used like this:

const DataButton = withData('button')
const DataInput = withData('input');

or for Components and functions

const DataInput = withData(SomeComponent);

or if you prefer

const DataButton = withData(<button/>)

declare that Outside your container (near your imports)

Here is usage in a container:

import withData from './withData';
const DataInput = withData('input');

export default class Container extends Component {
    state = {
         data: [
             // ...
         ]
    }

    handleItemChange = (e, data) => {
        // here the data is available 
        // ....
    }

    render () {
        return (
            <div>
                {
                    this.state.data.map((item, index) => (
                        <div key={index}>
                            <DataInput data={item} onChange={this.handleItemChange} value={item.value}/>
                        </div>
                    ))
                }
            </div>
        );
    }
}

Here is the wrapper code 'withData.js:

import React, { Component } from 'react';

const defaultOptions = {
    events: undefined,
}

export default (Target, options) => {
    Target = React.isValidElement(Target) ? Target.type : Target;
    options = { ...defaultOptions, ...options }

    class WithData extends Component {
        constructor(props, context){
            super(props, context);
            this.handlers = getHandlers(options.events, this);        
        }

        render() {
            const { data, children, ...props } = this.props;
            return <Target {...props} {...this.handlers} >{children}</Target>;
        }

        static displayName = `withData(${Target.displayName || Target.name || 'Component'})`
    }

    return WithData;
}

function getHandlers(events, thisContext) {
    if(!events)
        events = Object.keys(thisContext.props).filter(prop => prop.startsWith('on') && typeof thisContext.props[prop] === 'function')
    else if (typeof events === 'string')
        events = [events];

    return events.reduce((result, eventType) => {
        result[eventType] = (...args) => thisContext.props[eventType](...args, thisContext.props.data);
        return result;
    }, {});
}

@Charith Jayasanka 2020-01-22 07:04:55

Simply create a function like this

  function methodName(params) {
    //the thing  you wanna do
  }

and call it in the place you need

< Icon onClick = { () => { methodName(theParamsYouwantToPass); } }/ >

@Al Amin Shaon 2020-01-16 12:25:48

Simple changed is required:

Use <th value={column} onClick={that.handleSort} >{column}</th>

instead of <th value={column} onClick={that.handleSort} >{column}</th>

@Juan Lanus 2019-11-13 23:06:54

There were a lot of performance considerations, all in the vacuum.
The issue with this handlers is that you need to curry them in order to incorporate the argument that you can't name in the props.
This means that the component needs a handler for each and every clickable element. Let's agree that for a few buttons this is not an issue, right?
The problem arises when you are handling tabular data with dozens of columns and thousands of rows. There you notice the impact of creating that many handlers.

The fact is, I only need one.
I set the handler at the table level (or UL or OL...), and when the click happens I can tell which was the clicked cell using data available since ever in the event object:

nativeEvent.target.tagName
nativeEvent.target.parentElement.tagName 
nativeEvent.target.parentElement.rowIndex
nativeEvent.target.cellIndex
nativeEvent.target.textContent

I use the tagname fields to check that the click happened in a valid element, for example ignore clicks in THs ot footers.
The rowIndex and cellIndex give the exact location of the clicked cell.
Textcontent is the text of the clicked cell.

This way I don't need to pass the cell's data to the handler, it can self-service it.
If I needed more data, data that is not to be displayed, I can use the dataset attribute, or hidden elements.
With some simple DOM navigation it's all at hand.
This has been used in HTML since ever, since PCs were much easier to bog.

@Charitha Goonewardena 2019-11-01 12:28:18

Coming out of nowhere to this question, but i think .bind will do the trick. Find the sample code below.

const handleClick = (data) => {
    console.log(data)
}

<button onClick={handleClick.bind(null, { title: 'mytitle', id: '12345' })}>Login</button>

@hannad rehman 2017-08-13 19:47:55

this example might be little different from yours. but i can assure you that this is the best solution you can have for this problem. i have searched for days for a solution which has no performance issue. and finally came up with this one.

class HtmlComponent extends React.Component {
  constructor() {
    super();
    this.state={
       name:'MrRehman',
    };
    this.handleClick= this.handleClick.bind(this);
  }

  handleClick(event) {
    const { param } = e.target.dataset;
    console.log(param);
    //do what you want to do with the parameter
  }

  render() {
    return (
      <div>
        <h3 data-param="value what you wanted to pass" onClick={this.handleClick}>
          {this.state.name}
        </h3>
      </div>
    );
  }
}

UPDATE

incase you want to deal with objects that are supposed to be the parameters. you can use JSON.stringify(object) to convert to it to string and add to the data set.

return (
   <div>
     <h3 data-param={JSON.stringify({name:'me'})} onClick={this.handleClick}>
        {this.state.name}
     </h3>
   </div>
);

@SlimSim 2017-08-19 18:04:27

this does not work when the data passed is an object

@hannad rehman 2017-08-21 09:21:13

use JSON.stringify to fix the issue. @SlimSim . that should do the trick

@KFE 2017-11-03 13:54:13

If you need to use JSON.stringify for this problem then its probably not the correct method. The process of stringification takes a lot of memory.

@hannad rehman 2017-11-03 13:56:32

in most of the cases you would only pass ID as params, and get the object details based on that ID from your source object. and why and how does it take a lot of memory, i know JSON stringify is slow, but the click Fn is async and it will have no or 0 effect on dom, once constructed

@sneas 2019-03-03 14:22:54

I found the solution of passing param as a tag's attribute quite reasonable.

However it has limitations:

  • Doesn't work properly when list item has other tags (thus event.target might be different to intended)
  • Param could be a string only. Requires serialization and deserialization.

That's why I came up with this library: react-event-param

It:

  • Solves the problem of children by searching for needed attribute in parents whenever needed
  • Automatically serializes and deserializes param
  • Encapsulates the logic of setting and getting. No need to mess with param names

Usage example:

import { setEventParam, getEventParam } from "react-event-param";

class List extends Component {
  onItemClick = e => {
    const index = getEventParam(e.target);
    // Do something with index
  };

  render() {
    return (
      <ul>
        {this.props.items.map((itemText, index) => (
          <li
            key={index}
            {...setEventParam(index)}
            onClick={this.onItemClick}
          >
            {{ itemText }}
          </li>
        ))}
      </ul>
    );
  }
}

export default List;

@Bankim Sutaria 2019-04-27 03:24:12

You can use your code like this:

<th value={column} onClick={(e) => that.handleSort(e, column)} >{column}</th>

Here e is for event object, if you want to use event methods like preventDefault() in your handle function or want to get target value or name like e.target.name.

@jhchnc 2019-03-08 20:21:42

I realize this is pretty late to the party, but I think a much simpler solution could satisfy many use cases:

    handleEdit(event) {
        let value = event.target.value;
    }

    ...

    <button
        value={post.id}
        onClick={this.handleEdit} >Edit</button>

I presume you could also use a data- attribute.

Simple, semantic.

@Anik Mazumder 2019-03-10 06:53:41

class TableHeader extends Component {
  handleClick = (parameter,event) => {
console.log(parameter)
console.log(event)

  }

  render() {
    return (
      <button type="button" 
onClick={this.handleClick.bind(this,"dataOne")}>Send</button>
    );
  }
}

@Shree 2019-03-10 07:13:17

While this code may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.

@Sagiv b.g 2017-08-01 22:48:50

There are nice answers here, and i agree with @Austin Greco (the second option with separate components)
There is another way i like, currying.
What you can do is create a function that accept a parameter (your parameter) and returns another function that accepts another parameter (the click event in this case). then you are free to do with it what ever you want.

ES5:

handleChange(param) { // param is the argument you passed to the function
    return function (e) { // e is the event object that returned

    };
}

ES6:

handleChange = param => e => {
    // param is the argument you passed to the function
    // e is the event object that returned
};

And you will use it this way:

<input 
    type="text" 
    onChange={this.handleChange(someParam)} 
/>

Here is a full example of such usage:

const someArr = ["A", "B", "C", "D"];

class App extends React.Component {
  state = {
    valueA: "",
    valueB: "some initial value",
    valueC: "",
    valueD: "blah blah"
  };

  handleChange = param => e => {
    const nextValue = e.target.value;
    this.setState({ ["value" + param]: nextValue });
  };

  render() {
    return (
      <div>
        {someArr.map(obj => {
          return (
            <div>
              <label>
                {`input ${obj}   `}
              </label>
              <input
                type="text"
                value={this.state["value" + obj]}
                onChange={this.handleChange(obj)}
              />
              <br />
              <br />
            </div>
          );
        })}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Note that this approach doesn't solve the creation of a new instance on each render.
I like this approach over the other inline handlers as this one is more concise and readable in my opinion.

Edit:
As suggested in the comments below, you can cache / memoize the result of the function.

Here is a naive implementation:

let memo = {};

const someArr = ["A", "B", "C", "D"];

class App extends React.Component {
  state = {
    valueA: "",
    valueB: "some initial value",
    valueC: "",
    valueD: "blah blah"
  };

  handleChange = param => {
    const handler = e => {
      const nextValue = e.target.value;
      this.setState({ ["value" + param]: nextValue });
    }
    if (!memo[param]) {
      memo[param] = e => handler(e)
    }
    return memo[param]
  };

  render() {
    return (
      <div>
        {someArr.map(obj => {
          return (
            <div key={obj}>
              <label>
                {`input ${obj}   `}
              </label>
              <input
                type="text"
                value={this.state["value" + obj]}
                onChange={this.handleChange(obj)}
              />
              <br />
              <br />
            </div>
          );
        })}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root" />

@Tamb 2017-08-04 16:28:41

This should be the accepted answer. REALLY easy to implement and you don't need to create any other components or bind differently. Thank you!

@travellingprog 2017-08-26 01:38:38

Looks better, but from a performance perspective though, currying doesn't really help, because if you call handleChange twice, with the same param, you get two functions that the JS engine consider to be separate objects, even if they do the same thing. So you still get a re-render. For the sake of performance, you would need to cache the results of handleChange to get the performance advantage. Like handleChange = param => cache[param] || (e => { // the function body })

@llioor 2017-12-20 10:54:57

This is the perfect answer if you fulfill the advice from @travellingprog

@Sadok Mtir 2018-01-26 16:02:21

Can anyone provide a link or explain how this caching mechanism works ? thanks.

@Hatem Alimam 2018-02-17 11:23:32

Beautiful and neat !

@Jithesh Kt 2018-03-08 02:19:47

Beautiful. One doubt, how to make the parameter optional in ES6 way.?

@Sagiv b.g 2018-03-08 05:26:55

@JitheshKt if by optional you mean default then you can simply do this: handleChange = (param = 'something') => e => {

@cutemachine 2018-08-14 05:47:44

Yes, currying is the way to go. I agree with @Tamb, it should be the accepted answer. You can read more on the topic in this article: Parameterized Event Handlers

@Sagiv b.g 2018-10-05 18:27:11

@SadokMtir i've added an example for memoization

@omeralper 2019-02-20 23:58:30

If you use currying, new function will be created at each render. Same performance problem occurs as passing an arrow function.

@Sagiv b.g 2019-02-21 05:38:22

@omeralper its mentioned in the answer

@Syg 2019-06-25 11:43:07

You are the real MVP

@Ari 2019-07-09 00:47:57

@travellingprog Is that what is called memoization?

@Roma Mukherjee 2018-07-27 18:41:48

Theres' a very easy way.

 onClick={this.toggleStart('xyz')} . 
  toggleStart= (data) => (e) =>{
     console.log('value is'+data);  
 }

@Juan David Arce 2018-04-10 20:57:20

1. You just have to use an arrow function in the Onclick event like this: 

<th value={column} onClick={() => that.handleSort(theValue)} >{column}</th>

2.Then bind this in the constructor method:
    this.handleSort = this.handleSort.bind(this);

3.And finally get the value in the function:
  handleSort(theValue){
     console.log(theValue);
}

@Andysenclave 2018-04-10 04:06:44

I guess you will have to bind the method to the React’s class instance. It’s safer to use a constructor to bind all methods in React. In your case when you pass the parameter to the method, the first parameter is used to bind the ‘this’ context of the method, thus you cannot access the value inside the method.

@Karan Singh 2018-03-09 10:10:36

Below is the example which passes value on onClick event.

I used es6 syntax. remember in class component arrow function does not bind automatically, so explicitly binding in constructor.

class HeaderRows extends React.Component {

    constructor(props) {
        super(props);
        this.handleSort = this.handleSort.bind(this);
    }

    handleSort(value) {
        console.log(value);
    }

    render() {
        return(
            <tr>
                {this.props.defaultColumns.map( (column, index) =>
                    <th value={ column } 
                        key={ index } 
                        onClick={ () => this.handleSort(event.target.value) }>
                        { column }
                    </th>
                )}

                {this.props.externalColumns.map((column, index)  =>
                    <th value ={ column[0] }
                        key={ index }>
                        {column[0]}
                    </th>
                )}
            </tr>
         );
    }
}

@nandu 2018-02-24 18:29:27

Implementing show total count from an object by passing count as a parameter from main to sub components as described below.

Here is MainComponent.js

import React, { Component } from "react";

import SubComp from "./subcomponent";

class App extends Component {

  getTotalCount = (count) => {
    this.setState({
      total: this.state.total + count
    })
  };

  state = {
    total: 0
  };

  render() {
    const someData = [
      { name: "one", count: 200 },
      { name: "two", count: 100 },
      { name: "three", count: 50 }
    ];
    return (
      <div className="App">
        {someData.map((nameAndCount, i) => {
          return (
            <SubComp
              getTotal={this.getTotalCount}
              name={nameAndCount.name}
              count={nameAndCount.count}
              key={i}
            />
          );
        })}
        <h1>Total Count: {this.state.total}</h1>
      </div>
    );
  }
}

export default App;

And Here is SubComp.js

import React, { Component } from 'react';
export default class SubComp extends Component {

  calculateTotal = () =>{
    this.props.getTotal(this.props.count);
  }

  render() {
    return (
      <div>
        <p onClick={this.calculateTotal}> Name: {this.props.name} || Count: {this.props.count}</p>
      </div>
    )
  }
};

Try to implement above and you will get exact scenario that how pass parameters works in reactjs on any DOM method.

@Louis Alonzo 2018-02-12 12:07:32

You can simply do it if you are using ES6.

export default class Container extends Component {
  state = {
    data: [
        // ...
    ]
  }

  handleItemChange = (e, data) => {
      // here the data is available 
      // ....
  }
  render () {
     return (
        <div>
        {
           this.state.data.map((item, index) => (
              <div key={index}>
                  <Input onChange={(event) => this.handItemChange(event, 
                         item)} value={item.value}/>
              </div>
           ))
        }
        </div>
     );
   }
 }

@Mansi Teharia 2018-02-01 08:40:06

There are 3 ways to handle this :-

  1. Bind the method in constructor as :-

    export class HeaderRows extends Component {
       constructor() {
           super();
           this.handleSort = this.handleSort.bind(this);
       }
    }
    
  2. Use the arrow function while creating it as :-

    handleSort = () => {
        // some text here
    }
    
  3. Third way is this :-

    <th value={column} onClick={() => that.handleSort} >{column}</th>
    

@SM Chinna 2018-01-10 12:30:52

Using arrow function :

You must install stage-2:

npm install babel-preset-stage-2 :

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value=0
        }
    }

    changeValue = (data) => (e) => {
        alert(data);  //10
        this.setState({ [value]: data })
    }

    render() {
        const data = 10;
        return (
            <div>
                <input type="button" onClick={this.changeValue(data)} />
            </div>
        );
    }
}
export default App; 

@Po Rith 2017-10-06 16:48:58

Making alternate attempt to answer OP's question including e.preventDefault() calls:

Rendered link (ES6)

<a href="#link" onClick={(e) => this.handleSort(e, 'myParam')}>

Component Function

handleSort = (e, param) => {
  e.preventDefault();
  console.log('Sorting by: ' + param)
}

@Merugu Prashanth 2017-09-12 09:07:00

I have added code for onclick event value pass to the method in two ways . 1 . using bind method 2. using arrow(=>) method . see the methods handlesort1 and handlesort

var HeaderRows  = React.createClass({
    getInitialState : function() {
      return ({
        defaultColumns : ["col1","col2","col2","col3","col4","col5" ],
        externalColumns : ["ecol1","ecol2","ecol2","ecol3","ecol4","ecol5" ],

      })
    },
    handleSort:  function(column,that) {
       console.log(column);
       alert(""+JSON.stringify(column));
    },
    handleSort1:  function(column) {
       console.log(column);
       alert(""+JSON.stringify(column));
    },
    render: function () {
        var that = this;
        return(
        <div>
            <div>Using bind method</div>
            {this.state.defaultColumns.map(function (column) {
                return (
                    <div value={column} style={{height : '40' }}onClick={that.handleSort.bind(that,column)} >{column}</div>
                );
            })}
            <div>Using Arrow method</div>

            {this.state.defaultColumns.map(function (column) {
                return (
                    <div value={column} style={{height : 40}} onClick={() => that.handleSort1(column)} >{column}</div>

                );
            })}
            {this.state.externalColumns.map(function (column) {
                // Multi dimension array - 0 is column name
                var externalColumnName = column;
                return (<div><span>{externalColumnName}</span></div>
                );
            })}

        </div>);
    }
});

@Brandon 2016-08-12 01:48:55

[[h/t to @E.Sundin for linking this in a comment]

The top answer (anonymous functions or binding) will work, but it's not the most performant, as it creates a copy of the event handler for every instance generated by the map() function.

This is an explanation of the optimal way to do it from the ESLint-plugin-react:

Lists of Items

A common use case of bind in render is when rendering a list, to have a separate callback per list item:

const List = props => (
      <ul>
        {props.items.map(item =>
          <li key={item.id} onClick={() => console.log(item.id)}>
            ...
          </li>
        )}
      </ul>
    );

Rather than doing it this way, pull the repeated section into its own component:

const List = props => (
      <ul>
        {props.items.map(item =>
          <ListItem 
            key={item.id} 
            item={item} 
            onItemClick={props.onItemClick} // assume this is passed down to List
           />
        )}
      </ul>
    );


const ListItem = props => {
  const _onClick = () => {
    console.log(props.item.id);
  }
    return (
      <li onClick={_onClick}>
        ...
      </li>
    );

});

This will speed up rendering, as it avoids the need to create new functions (through bind calls) on every render.

@aikeru 2016-08-12 15:07:48

Does react invoke those functions with call/apply, then, under the hood, and avoid using bind internally?

@Carlos Martinez 2017-05-09 13:50:46

Is there a way to doing this using a stateless component?

@Brandon 2017-05-09 14:46:38

@CarlosMartinez good eye, i updated the example--they should've been stateless functional components (SFC) in the first place. Generally, if a component doesn't ever use this.state, you can safely swap it out with an SFC.

@Mattias Petter Johansson 2017-05-19 21:04:31

Hmm, I don't get how this is more performant? Won't the ListItem function be invoked every time, and thus the _onClick function will be created every render.

@Brandon 2017-05-19 21:27:29

I'm far from an expert here, but as I understand it, in the 'correct' pattern, there's only one instance of the handler and it's passed the prop for whichever instance of the component calls it. In the bind example (ie, the 'wrong' pattern), there's one instance of the handler for every instantiated component. It's sort of the memory equivalent of writing the same function thirty times vice writing it once & calling it where needed.

@Ari 2019-07-09 00:07:44

Isn't it just rendering more functions?

@Taylan 2019-11-08 19:08:45

Did you mean to use props.onItemClick instead of console.log

@Haimanot 2019-12-10 12:58:09

Thanks @Brandon! This worked like a charm for me :-)

@Isaac Pak 2020-02-14 18:48:15

How can we test this to ensure that the callback is not being created on every render?

@Reetesh Agrawal 2017-03-09 17:49:57

I have below 3 suggestion to this on JSX onClick Events -

  1. Actually, we don't need to use .bind() or Arrow function in our code. You can simple use in your code.

  2. You can also move onClick event from th(or ul) to tr(or li) to improve the performance. Basically you will have n number of "Event Listeners" for your n li element.

    So finally code will look like this:
    <ul onClick={this.onItemClick}>
        {this.props.items.map(item =>
               <li key={item.id} data-itemid={item.id}>
                   ...
               </li>
          )}
    </ul>
    

    // And you can access item.id in onItemClick method as shown below:

    onItemClick = (event) => {
       console.log(e.target.getAttribute("item.id"));
    }
    
  3. I agree with the approach mention above for creating separate React Component for ListItem and List. This make code looks good however if you have 1000 of li then 1000 Event Listeners will be created. Please make sure you should not have much event listener.

    import React from "react";
    import ListItem from "./ListItem";
    export default class List extends React.Component {
    
        /**
        * This List react component is generic component which take props as list of items and also provide onlick
        * callback name handleItemClick
        * @param {String} item - item object passed to caller
        */
        handleItemClick = (item) => {
            if (this.props.onItemClick) {
                this.props.onItemClick(item);
            }
        }
    
        /**
        * render method will take list of items as a props and include ListItem component
        * @returns {string} - return the list of items
        */
        render() {
            return (
                <div>
                  {this.props.items.map(item =>
                      <ListItem key={item.id} item={item} onItemClick={this.handleItemClick}/>
                  )}
                </div>
            );
        }
    
    }
    
    
    import React from "react";
    
    export default class ListItem extends React.Component {
        /**
        * This List react component is generic component which take props as item and also provide onlick
        * callback name handleItemClick
        * @param {String} item - item object passed to caller
        */
        handleItemClick = () => {
            if (this.props.item && this.props.onItemClick) {
                this.props.onItemClick(this.props.item);
            }
        }
        /**
        * render method will take item as a props and print in li
        * @returns {string} - return the list of items
        */
        render() {
            return (
                <li key={this.props.item.id} onClick={this.handleItemClick}>{this.props.item.text}</li>
            );
        }
    }
    

@SlimSim 2017-08-19 17:38:33

This does not work when the data you need to pass is an object. The attribute will only work with strings. Also reading from the dom via get attribute is probably a more expensive operation.

@Santiago Ramirez 2017-02-24 20:46:13

This is my approach, not sure how bad it is, please comment

In the clickable element

return (
    <th value={column} onClick={that.handleSort} data-column={column}>   {column}</th>
);

and then

handleSort(e){
    this.sortOn(e.currentTarget.getAttribute('data-column'));
}

@kamranicus 2017-03-15 05:00:51

This is an approach I was thinking of, it feels a little hacky but avoids creating a new component. I am not sure if getAttribute is better or worse perf-wise compared to pulling into a separate component.

@Stephane L 2018-03-16 16:41:32

I think it's a good solution because it is very simple. But it works only with string values, if you want an object it doesn't work.

@Solvitieg 2018-04-20 22:42:27

For an object you would need to do encodeURIComponent(JSON.stringify(myObj)), then to parse it, JSON.parse(decodeURIComponent(myObj)). For functions I'm pretty sure this wont work without eval or new Function(), both of which should be avoided. For these reasons I don't use data-attributes to pass data in React/JS.

@Santiago Ramirez 2018-05-04 08:54:17

I want to add I don't use this often and only for minor things. But usually I just create a component and pass the data as props to it. Then either handle the click inside that new component or pass a onClick function to the component. Like is explained in Brandon answer

@gsziszi 2018-10-21 15:24:24

dataset can be accessed directly on this way on modern browsers (including IE11): e.currentTarget.dataset.column

@Juan Lanus 2019-11-13 22:35:51

This is a good approach, with clear and simple data, that doesn't involve smart functions trickery, and that is not affected by the so-feared performance degradation (that perhaps is significant in tables over several thousand rows).

@MiF 2016-08-15 15:43:42

I think, .bind(this, arg1, arg2, ...) in React's map - is bad code, because it is slow! 10-50 of .bind(this) in single render method - very slow code.
I fix it like this:
Render method
<tbody onClick={this.handleClickRow}>
map of <tr data-id={listItem.id}>
Handler
var id = $(ev.target).closest('tr').data().id

Full code below:

class MyGrid extends React.Component {
  // In real, I get this from props setted by connect in Redux
  state = {
    list: [
      {id:1, name:'Mike'},
      {id:2, name:'Bob'},
      {id:3, name:'Fred'}
    ],
    selectedItemId: 3
  }
  
  render () {
    const { list, selectedItemId }  = this.state
    const { handleClickRow } = this

    return (
      <table>
        <tbody onClick={handleClickRow}>
          {list.map(listItem =>(
            <tr key={listItem.id} data-id={listItem.id} className={selectedItemId===listItem.id ? 'selected' : ''}>
              <td>{listItem.id}</td>
              <td>{listItem.name}</td>
            </tr>
          ))}
        </tbody>
      </table>
    )
  }
  
  handleClickRow = (ev) => {
    const target = ev.target
    // You can use what you want to find TR with ID, I use jQuery
    const dataset = $(target).closest('tr').data()
    if (!dataset || !dataset.id) return
    this.setState({selectedItemId:+dataset.id})
    alert(dataset.id) // Have fun!
  }
}

ReactDOM.render(<MyGrid/>, document.getElementById("react-dom"))
table {
  border-collapse: collapse;
}

.selected td {
  background-color: rgba(0, 0, 255, 0.3);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="react-dom"></div>

@MiF 2017-03-01 13:45:45

Please, write comments for what you minus

@kamranicus 2017-03-15 05:04:17

Mixing JQuery with React is not a recommended way of using React, especially if you're unit testing your code. The most idiomatic answer is to separate your list items into child components because they have actions that presumably affect application state.

@MiF 2017-03-15 15:17:25

I know, but it is just only for simplest demonstration of my solution.

@maaartinus 2018-07-08 16:15:43

In your code, jQuery does more than just demonstrate your solution. For handlers on <tr> itself, you can leave out closest and need no jQuery at all, so your solution is just like others using data-*. For handlers on components inside of <tr>, you need some DOM manipulations... that's bad as already said, but such handlers weren't asked for.

@MiF 2018-07-15 15:35:30

You right. Now I think, that the best way is to create a nested component and return it from map function. In this way, you have no work with DOM and create a nested component with bindings will be done once.

@Brett DeWoody 2016-05-20 05:36:24

One more option not involving .bind or ES6 is to use a child component with a handler to call the parent handler with the necessary props. Here's an example (and a link to working example is below):

var HeaderRows = React.createClass({
  handleSort:  function(value) {
     console.log(value);
  },
  render: function () {
      var that = this;
      return(
          <tr>
              {this.props.defaultColumns.map(function (column) {
                  return (
                      <TableHeader value={column} onClick={that.handleSort} >
                        {column}
                      </TableHeader>
                  );
              })}
              {this.props.externalColumns.map(function (column) {
                  // Multi dimension array - 0 is column name
                  var externalColumnName = column[0];
                  return ( <th>{externalColumnName}</th>
                  );
              })}
          </tr>);
      )
  }
});

// A child component to pass the props back to the parent handler
var TableHeader = React.createClass({
  propTypes: {
    value: React.PropTypes.string,
    onClick: React.PropTypes.func
  },
  render: function () {
    return (
      <th value={this.props.value} onClick={this._handleClick}
        {this.props.children}
      </th>
    )        
  },
  _handleClick: function () {
    if (this.props.onClick) {
      this.props.onClick(this.props.value);
    }
  }
});

The basic idea is for the parent component to pass the onClick function to a child component. The child component calls the onClick function and can access any props passed to it (and the event), allowing you to use any event value or other props within the parent's onClick function.

Here's a CodePen demo showing this method in action.

Related Questions

Sponsored Content

66 Answered Questions

[SOLVED] Loop inside React JSX

  • 2014-04-05 05:29:28
  • B Robster
  • 883093 View
  • 1347 Score
  • 66 Answer
  • Tags:   javascript reactjs

33 Answered Questions

33 Answered Questions

[SOLVED] Programmatically navigate using react router

  • 2015-06-26 17:38:51
  • George Mauer
  • 807331 View
  • 1554 Score
  • 33 Answer
  • Tags:   reactjs react-router

54 Answered Questions

47 Answered Questions

[SOLVED] Sort array of objects by string property value

7 Answered Questions

[SOLVED] ReactJS - Does render get called any time "setState" is called?

  • 2014-07-13 01:11:07
  • Brad Parks
  • 249336 View
  • 517 Score
  • 7 Answer
  • Tags:   javascript reactjs

32 Answered Questions

[SOLVED] Is JavaScript a pass-by-reference or pass-by-value language?

40 Answered Questions

[SOLVED] Invariant Violation: Objects are not valid as a React child

  • 2015-10-14 05:43:56
  • almeynman
  • 511174 View
  • 354 Score
  • 40 Answer
  • Tags:   javascript reactjs

19 Answered Questions

[SOLVED] Can you force a React component to rerender without calling setState?

  • 2015-06-03 16:44:58
  • Philip Walton
  • 885107 View
  • 732 Score
  • 19 Answer
  • Tags:   reactjs react-jsx

54 Answered Questions

Sponsored Content