How to add custom html attributes in JSX

by

EDIT: Updated to reflect React 16

Custom attributes are supported natively in React 16. This means that adding a custom attribute to an element is now as simple as adding it to a render function, like so:

render() {
  return (
    <div custom-attribute="some-value" />
  );
}

For more:
https://reactjs.org/blog/2017/09/26/react-v16.0.html#support-for-custom-dom-attributes
https://facebook.github.io/react/blog/2017/09/08/dom-attributes-in-react-16.html

Previous answer (React 15 and earlier)

Custom attributes are currently not supported. See this open issue for more info: https://github.com/facebook/react/issues/140

As a workaround, you can do something like this in componentDidMount:

componentDidMount: function() {
  var element = ReactDOM.findDOMNode(this.refs.test);
  element.setAttribute('custom-attribute', 'some value');
}

See https://jsfiddle.net/peterjmag/kysymow0/ for a working example. (Inspired by syranide’s suggestion in this comment.)

More Related Contents:

  1. How to Protect website code PHP / JS? [closed]
  2. How do you import a javascript package from a cdn/script tag in React?
  3. How to create a translucent in React Native?
  4. Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object
  5. Link index.html client.js and server.js
  6. Render basic HTML view?
  7. When to use functional setState
  8. Connecting to TCP Socket from browser using javascript
  9. Node.js can’t create Blobs?
  10. How do you send images to node js with Axios?
  11. ‘Access-Control-Allow-Origin’ issue when API call made from React (Isomorphic app)
  12. Passing a variable from node.js to html
  13. React: why child component doesn’t update when prop changes
  14. Where’s the connection between index.html and index.js in a Create-React-App application?
  15. Save and render a webpage with PhantomJS and node.js
  16. useEffect does not listen for localStorage
  17. I am getting error in console “You need to enable JavaScript to run this app.” reactjs
  18. A plain JavaScript way to decode HTML entities, works on both browsers and Node
  19. React: Script tag not working when inserted using dangerouslySetInnerHTML
  20. How do I add validation to the form in my React component?
  21. Matched leaf route at location “/” does not have an element
  22. unable to deploy next js to azure
  23. Updating state to the same state directly in the component body
  24. Sharing websocket across browser tabs?
  25. Failed to load resource from same directory when redirecting Javascript
  26. how to use jQuery ajax calls with node.js
  27. minimise the code since I am using the same code only the content in p tags changes and component AccordionHeader header changes
  28. ReactJS server-side rendering vs client-side rendering
  29. How to deploy a React + NodeJS Express application to AWS?
  30. Firebase-Admin, importing it to react application throws Module not found error

Leave a Comment