React js onClick can t pass value to method

Question

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         lt tr gt           this props defaultColumns map function  column              return                lt th value  column  onClick  that handleSort   gt  column  lt  th gt                                    this props externalColumns map function  column                 Multi dimension array - 0 is column name           var externalColumnName   column 0             return    lt th gt  externalColumnName  lt  th gt                       lt  tr gt                   How can I pass a value to the onClick event in React js

User · Answer

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.

User · Answer

You can use your code like this    lt th value  column  onClick   e    gt  that handleSort e  column    gt  column  lt  th gt    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

User · Answer

Use a closure  it result in a clean solution     lt th onClick  this handleSort column    gt  column  lt  th gt   handleSort function will return a function that have the value column already set       handleSort  function value         return      gt            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

User · Answer

Easy Way  Use an arrow function   return      lt th value  column  onClick       gt  this handleSort column   gt  column  lt  th gt       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        gt        this props onHeaderClick this props value          render         return          lt th onClick  this handleClick  gt           this props column         lt  th gt                 Main component   this props defaultColumns map  column    gt       lt TableHeader     value  column      onHeaderClick  this handleSort      gt          Old Easy Way  ES5   Use  bind to pass the parameter you want  this way you are binding the function with the Component context    return      lt th value  column  onClick  this handleSort bind this  column   gt  column  lt  th gt

User · Answer

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

User · Answer

Nowadays  with ES6  I feel we could use an updated answer    return      lt th value  column  onClick      gt this handleSort column    gt  column  lt  th gt       Basically   for any that don t know  since onClick is expecting a function passed to it  bind works because it creates a copy of a function  Instead we can pass an arrow function expression that simply invokes the function we want  and preserves this  You should never need to bind the render method in React  but if for some reason you re losing this in one of your component methods   constructor props      super props     this myMethod   this myMethod bind this

User · Answer

Simple changed is required    Use   lt th value  column  onClick  that handleSort   gt  column  lt  th gt   instead of  lt th value  column  onClick  that handleSort   gt  column  lt  th gt

User · Answer

There are 3 ways to handle this  -    Bind the method in constructor as  -   export class HeaderRows extends Component      constructor            super           this handleSort   this handleSort bind this           Use the arrow function while creating it as  -  handleSort        gt           some text here    Third way is this  -   lt th value  column  onClick       gt  that handleSort   gt  column  lt  th gt

User · Answer

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   gt        const index   getEventParam e target          Do something with index         render         return          lt ul gt           this props items map  itemText  index    gt               lt li             key  index                  setEventParam index               onClick  this onItemClick             gt                 itemText               lt  li gt                     lt  ul gt                export default List

User · Answer

Making alternate attempt to answer OP s question including e preventDefault   calls   Rendered link  ES6    lt a href   link  onClick   e    gt  this handleSort e   myParam    gt    Component Function  handleSort    e  param    gt      e preventDefault      console log  Sorting by      param

User · Answer

class extends React Component       onClickDiv    column    gt               do stuff           render             return  lt div onClick       gt  this onClickDiv  123      gt

User · Answer

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    lt button onClick       gt  this handleClick id     gt    above example is equivalent to calling  bind or you can explicitly call bind    lt button onClick  this handleClick bind this  id     gt    Apart from these two approaches  you can also pass arguments to a function that is defined as a curry function   handleClick    id    gt       gt        console log  Hello  your ticket number is   id       lt button onClick  this handleClick id     gt

User · Answer

Simply create a function like this   function methodName params          the thing  you wanna do      and call it in the place you need   lt Icon onClick         gt    methodName theParamsYouwantToPass       gt

User · Answer

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             lt tr gt                 this props defaultColumns map function  column                      return                          lt TableHeader value  column  onClick  that handleSort   gt                           column                         lt  TableHeader gt                                                        this props externalColumns map function  column                         Multi dimension array - 0 is column name                   var externalColumnName   column 0                     return    lt th gt  externalColumnName  lt  th gt                                                    lt  tr gt                        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          lt th value  this props value  onClick  this  handleClick           this props children         lt  th gt                        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

User · Answer

1  You just have to use an arrow function in the Onclick event like this     lt th value  column  onClick       gt  that handleSort theValue    gt  column  lt  th gt   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

User · Answer

Theres  a very easy way    onClick  this toggleStart  xyz         toggleStart   data    gt   e    gt        console log  value is  data

User · Answer

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  lt button  gt     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    gt               here the data is available                             render              return                lt div gt                                        this state data map  item  index    gt                             lt div key  index  gt                               lt DataInput data  item  onChange  this handleItemChange  value  item value   gt                           lt  div gt                                                        lt  div gt                       Here is the wrapper code  withData js   import React    Component   from  react    const defaultOptions         events  undefined     export default  Target  options    gt        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  lt Target     props      this handlers   gt  children  lt  Target gt                      static displayName    withData   Target displayName    Target name     Component                return WithData     function getHandlers events  thisContext        if  events          events   Object keys thisContext props  filter prop   gt  prop startsWith  on    amp  amp  typeof thisContext props prop       function       else if  typeof events      string           events    events        return events reduce  result  eventType    gt            result eventType        args    gt  thisContext props eventType     args  thisContext props data           return result

User · Answer

Coming out of nowhere to this question  but i think  bind will do the trick  Find the sample code below    const handleClick    data    gt        console log data      lt button onClick  handleClick bind null    title   mytitle   id   12345      gt Login lt  button gt

User · Answer

class TableHeader extends Component     handleClick    parameter event    gt    console log parameter  console log event          render         return          lt button type  button   onClick  this handleClick bind this  dataOne    gt Send lt  button gt

User · Answer

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  lt tbody onClick  this handleClickRow  gt  map of  lt tr data-id  listItem id  gt  Handler var id     ev target  closest  tr   data   id  Full code below    x000D   x000D  class MyGrid extends React Component   x000D       In real  I get this from props setted by connect in Redux x000D    state     x000D      list    x000D         id 1  name  Mike    x000D         id 2  name  Bob    x000D         id 3  name  Fred   x000D         x000D      selectedItemId  3 x000D      x000D     x000D    render      x000D      const   list  selectedItemId      this state x000D      const   handleClickRow     this x000D   x000D      return   x000D         lt table gt  x000D           lt tbody onClick  handleClickRow  gt  x000D             list map listItem   gt   x000D               lt tr key  listItem id  data-id  listItem id  className  selectedItemId   listItem id    selected        gt  x000D                 lt td gt  listItem id  lt  td gt  x000D                 lt td gt  listItem name  lt  td gt  x000D               lt  tr gt  x000D                x000D           lt  tbody gt  x000D         lt  table gt  x000D        x000D      x000D     x000D    handleClickRow    ev    gt    x000D      const target   ev target x000D         You can use what you want to find TR with ID  I use jQuery x000D      const dataset     target  closest  tr   data   x000D      if   dataset     dataset id  return x000D      this setState  selectedItemId  dataset id   x000D      alert dataset id     Have fun  x000D      x000D    x000D   x000D  ReactDOM render  lt MyGrid  gt   document getElementById  react-dom    x000D  table   x000D    border-collapse  collapse  x000D    x000D   x000D   selected td   x000D    background-color  rgba 0  0  255  0 3   x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 0 2 react min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 0 2 react-dom min js  gt  lt  script gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt div id  react-dom  gt  lt  div gt  x000D   x000D   x000D

User · Answer

You just need to use Arrow function to pass value     lt button onClick       gt  this props onClickHandle  StackOverFlow    gt   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

User · Answer

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    gt        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          lt div className  App  gt           someData map  nameAndCount  i    gt              return                lt SubComp               getTotal  this getTotalCount                name  nameAndCount name                count  nameAndCount count                key  i                gt                                    lt h1 gt Total Count   this state total  lt  h1 gt         lt  div gt                export default App    And Here is SubComp js  import React    Component   from  react   export default class SubComp extends Component      calculateTotal        gt       this props getTotal this props count          render         return          lt div gt           lt p onClick  this calculateTotal  gt  Name   this props name     Count   this props count  lt  p gt         lt  div gt                 Try to implement above and you will get exact scenario that how pass parameters works in reactjs on any DOM method

User · Answer

You can simply do it if you are using ES6   export default class Container extends Component     state         data                                handleItemChange    e  data    gt             here the data is available                      render           return            lt div gt                       this state data map  item  index    gt                   lt div key  index  gt                     lt Input onChange   event    gt  this handItemChange event                            item   value  item value   gt                 lt  div gt                                   lt  div gt

User · Answer

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           lt div gt               lt div gt Using bind method lt  div gt               this state defaultColumns map function  column                    return                        lt div value  column  style   height    40    onClick  that handleSort bind that column    gt  column  lt  div gt                                                  lt div gt Using Arrow method lt  div gt                this state defaultColumns map function  column                    return                        lt div value  column  style   height   40   onClick       gt  that handleSort1 column    gt  column  lt  div gt                                                   this state externalColumns map function  column                       Multi dimension array - 0 is column name                 var externalColumnName   column                  return   lt div gt  lt span gt  externalColumnName  lt  span gt  lt  div gt                                               lt  div gt

User · Answer

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   gt           lt ul gt           props items map item   gt             lt li key  item id  onClick       gt  console log item id   gt                             lt  li gt                    lt  ul gt              Rather than doing it this way  pull the repeated section into its own   component    const List   props   gt           lt ul gt           props items map item   gt             lt ListItem              key  item id               item  item               onItemClick  props onItemClick     assume this is passed down to List              gt                    lt  ul gt           const ListItem   props   gt      const  onClick        gt        console log props item id           return          lt li onClick   onClick  gt                     lt  li gt                   This will speed up rendering  as it avoids the need to create new   functions  through bind calls  on every render

User · Answer

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   gt  e   gt           param is the argument you passed to the function        e is the event object that returned      And you will use it this way    lt input      type  text       onChange  this handleChange someParam      gt    Here is a full example of such usage    x000D   x000D  const someArr     A    B    C    D    x000D   x000D  class App extends React Component   x000D    state     x000D      valueA      x000D      valueB   some initial value   x000D      valueC      x000D      valueD   blah blah  x000D       x000D   x000D    handleChange   param   gt  e   gt    x000D      const nextValue   e target value  x000D      this setState     value    param   nextValue     x000D       x000D   x000D    render     x000D      return   x000D         lt div gt  x000D           someArr map obj   gt    x000D            return   x000D               lt div gt  x000D                 lt label gt  x000D                    input   obj       x000D                 lt  label gt  x000D                 lt input x000D                  type  text  x000D                  value  this state  value    obj   x000D                  onChange  this handleChange obj   x000D                  gt  x000D                 lt br   gt  x000D                 lt br   gt  x000D               lt  div gt  x000D               x000D              x000D         lt  div gt  x000D         x000D      x000D    x000D   x000D  const rootElement   document getElementById  root    x000D  ReactDOM render  lt App   gt   rootElement   x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react-dom min js  gt  lt  script gt  x000D   lt div id  root  gt  lt  div gt  x000D   x000D   x000D    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     x000D   x000D  let memo       x000D   x000D  const someArr     A    B    C    D    x000D   x000D  class App extends React Component   x000D    state     x000D      valueA      x000D      valueB   some initial value   x000D      valueC      x000D      valueD   blah blah  x000D       x000D   x000D    handleChange   param   gt    x000D      const handler   e   gt    x000D        const nextValue   e target value  x000D        this setState     value    param   nextValue     x000D        x000D      if   memo param     x000D        memo param    e   gt  handler e  x000D        x000D      return memo param  x000D       x000D   x000D    render     x000D      return   x000D         lt div gt  x000D           someArr map obj   gt    x000D            return   x000D               lt div key  obj  gt  x000D                 lt label gt  x000D                    input   obj       x000D                 lt  label gt  x000D                 lt input x000D                  type  text  x000D                  value  this state  value    obj   x000D                  onChange  this handleChange obj   x000D                  gt  x000D                 lt br   gt  x000D                 lt br   gt  x000D               lt  div gt  x000D               x000D              x000D         lt  div gt  x000D         x000D      x000D    x000D   x000D  const rootElement   document getElementById  root    x000D  ReactDOM render  lt App   gt   rootElement   x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react-dom min js  gt  lt  script gt  x000D   lt div id  root    gt  x000D   x000D   x000D

User · Answer

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               lt tr gt                   this props defaultColumns map   column  index    gt                       lt th value   column                            key   index                            onClick        gt  this handleSort event target value    gt                            column                        lt  th gt                                       this props externalColumns map  column  index     gt                       lt th value    column 0                            key   index   gt                           column 0                        lt  th gt                                  lt  tr gt

User · Answer

I have below 3 suggestion to this on JSX onClick Events -    Actually  we don t need to use  bind   or Arrow function in our code  You can simple use  in your code  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   lt ul onClick  this onItemClick  gt       this props items map item   gt              lt li key  item id  data-itemid  item id  gt                                 lt  li gt            lt  ul gt       And you can access item id in onItemClick method as shown below    onItemClick    event    gt       console log e target getAttribute  item id        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    gt            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                lt div gt                 this props items map item   gt                     lt ListItem key  item id  item  item  onItemClick  this handleItemClick   gt                                lt  div gt                        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        gt            if  this props item  amp  amp  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                lt li key  this props item id  onClick  this handleItemClick  gt  this props item text  lt  li gt

User · Answer

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    gt   e    gt            alert data      10         this setState    value   data               render             const data   10          return                lt div gt                   lt input type  button  onClick  this changeValue data     gt               lt  div gt                     export default App

User · Answer

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          lt div gt           lt h3 data-param  value what you wanted to pass  onClick  this handleClick  gt             this state name           lt  h3 gt         lt  div gt                 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       lt div gt        lt h3 data-param  JSON stringify  name  me     onClick  this handleClick  gt           this state name        lt  h3 gt      lt  div gt

User · Answer

This is my approach  not sure how bad it is  please comment  In the clickable element   return        lt th value  column  onClick  that handleSort  data-column  column  gt     column  lt  th gt       and then  handleSort e       this sortOn e currentTarget getAttribute  data-column

User · Answer

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

[javascript] React js onClick can't pass value to method

Examples related to javascript

Examples related to reactjs