How to access custom attributes from event object in React

Question

React is able to render custom attributes as described at  http   facebook github io react docs jsx-gotchas html      If you want to use a custom attribute  you should prefix it with   data-        lt div data-custom-attribute  foo    gt    And that s great news except I can t find a way to access it from the event object e g    render  function          lt a data-tag  i  style  showStyle  onClick  this removeTag  gt  lt  a gt      removeTag  function event        this setState  inputVal  event target              The element and data- property render in html fine  Standard properties like style can be accessed as event target style fine  Instead of event target I tried    event target props data tag  event target props data  tag    event target props  data-tag      event target data tag  event target data  tag    event target  data-tag     none of these worked

User · Answer

As of React v16 1 1  2017   here is the official solution  https   reactjs org docs handling-events html passing-arguments-to-event-handlers  TLDR  OP should do   render  function          lt a style  showStyle  onClick   e    gt  this removeTag i  e   gt  lt  a gt      removeTag  function i  event        this setState  inputVal  i

User · Answer

event target gives you the native DOM node  then you need to use the regular DOM APIs to access attributes  Here are docs on how to do that Using data attributes   You can do either event target dataset tag or event target getAttribute  data-tag    either one works

User · Answer

If anyone is trying to use event target in React and finding a null value  it is because a SyntheticEvent has replaced the event target  The SyntheticEvent now holds  currentTarget   such as in event currentTarget getAttribute  data-username      https   facebook github io react docs events html  It looks like React does this so that it works across more browsers  You can access the old properties through a nativeEvent attribute

User · Answer

lt div className  btn  onClick   e    gt       console log e currentTarget attributes  tag   value        tag  bold  gt       lt i className  fa fa-bold    gt   lt  div gt    so e currentTarget attributes  tag   value works for me

User · Answer

You can simply use event target dataset object   This will give you the object with all data attributes

User · Answer

To help you get the desired outcome in perhaps a different way than you asked   render  function                  lt a data-tag  i  style  showStyle  onClick  this removeTag bind null  i   gt  lt  a gt             removeTag  function i           do whatever      Notice the bind    Because this is all javascript  you can do handy things like that  We no longer need to attach data to DOM nodes in order to keep track of them   IMO this is much cleaner than relying on DOM events   Update April 2017  These days I would write onClick       gt  this removeTag i   instead of  bind

User · Answer

In React you don t need the html data  use a function return a other function  like this it s very simple send custom params and you can acces the custom data and the event    render  function          lt a style  showStyle  onClick  this removeTag i   gt  lt  a gt      removeTag   i    gt   event    gt        this setState  inputVal  i

User · Answer

Method inside the component userClick event    let tag   event currentTarget dataset tag   console log tag      should return Tagvalue      when render element  lt a data-tag  TagValue  onClick  this userClick  gt Click me lt  a gt

User · Answer

I do not know about React  but in the general case you can pass custom attributes like this   1  define inside an html-tag a new attribute with data- prefix   data-mydatafield    asdasdasdaad    2  get from javascript with   e target attributes getNamedItem  data-mydatafield   value

User · Answer

Here s the best way I found   var attribute   event target attributes getNamedItem  data-tag   value    Those attributes are stored in a  NamedNodeMap   which you can access easily with the getNamedItem method

User · Answer

You can access data attributes something like this  event target dataset tag

User · Answer

I think it s recommended to bind all methods where you need to use this setState method which is defined in the React Component class  inside the constructor  in your case you constructor should be like     constructor             super             This binding removeTag is necessary to make  this  work in the callback         this removeTag   this removeTag bind this            removeTag event           console log event target            use Object destructuring to fetch all element values           const  style  dataset    event target         console log style          console log dataset tag           render                   lt a data-tag  i  style  showStyle  onClick  this removeTag bind null  i   gt  lt  a gt            For more reference on Object destructuring https   developer mozilla org en-US docs Web JavaScript Reference Operators Destructuring assignment Object destructuring

User · Answer

Or you can use a closure    render  function          lt a data-tag  i  style  showStyle  onClick  this removeTag i   gt  lt  a gt         removeTag  function  i        return function  e           and you get both  i  and the event  e        bind this    important to bind function

User · Answer

Try instead of assigning dom properties  which is slow  just pass your value as a parameter to function that actually create your handler   render  function          lt a style  showStyle  onClick  this removeTag i   gt  lt  a gt      removeTag    customAttribute    gt   event    gt        this setState  inputVal  customAttribute

User · Answer

This single line of code solved the problem for me   event currentTarget getAttribute  data-tag

[javascript] How to access custom attributes from event object in React?

Examples related to javascript

Examples related to facebook

Examples related to reactjs