How to add custom html attributes in JSX

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:

Previous answer (React 15 and earlier)

Custom attributes are currently not supported. See this open issue for more info:

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 for a working example. (Inspired by syranide’s suggestion in this comment.)

Leave a Comment