How to add custom html attributes in JSX

Question

There are different reasons behind it, but I wonder how to simply add custom attributes to an element in JSX?

Solution 1

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.)

Solution 2

You can add an attribute using ES6 spread operator, e.g.

let myAttr = {'data-attr': 'value'}

and in render method:

<MyComponent {...myAttr} />

Solution 3

Consider you want to pass a custom attribute named myAttr with value myValue, this will work:

<MyComponent data-myAttr={myValue} />

Solution 4

You can use the "is" attribute to disable the React attribute whitelist for an element.

See my anwser here: Stackoverflow

Solution 5

if you are using es6 this should work:

<input {...{ "customattribute": "somevalue" }} />

View more solutions

Comments

[Alexey Nikonov]

May be one comment help someone, i found out React 16.7 doesnt rerenders and update the component's html attributes if you changed only them in a store (f.e. redux) and tied to component. This means the component has f.e.aria-modal=true, you push the changes (to false) to the store of aria/data attributes, but nothing else is changed (such as component's content or class or variables in there) as the result ReactJs will not update aria/data attrs in that components. I've been messing around about whole day to realise that.

[Andrey Borisko]

yeah, only this way I guess. this approach looks interesting though

[Andrey Borisko]

interesting. I'll check it out

[Andrey Borisko]

Do you think this let myAttr = {'custom-attr': 'value'} would work?

[Spadar Shut]

It does work if you have a ES6 transpiler in your project

[Andrey Borisko]

well, here is a codepen example. I don't see custom attribute there

[k7n4n5t3w4rt]

i'm a total react n00b so sorry if this is a stupid question, but why not just add all the custom attributes in the ref callback? eg: ref={(thisSvgElement) => { thisSvgElement.setAttribute('xmlns:xlink', 'w3.org/1999/xlink'); }}

[peterjmag]

@k7n4n5t3w4rt Yep, that should work too. Ref callbacks just didn't exist back when I wrote this answer.

[DDM]

@AndreyBorisko - The attributes will be effective as long as they are valid HTML5 attributes. I forked your pen and made changes: codepen.io/deveedutta/pen/ObqEQL The button is clearly disabled.

[Andrey Borisko]

@DDM disabled is not a custom attribute. It's a standard HTML attribute. Have I missed something in your example?

[DDM]

@AndreyBorisko - I intended to mention but missed, that invalid html attributes and custom attributes won't work as of now unless pre-fixed by data-.

[Luca Fagioli]

@GusDeCool First of all it is stated that was tested with react 15.3.1, so your downvote does not make any sense since you are complaining that it does not work with 15.5.4. Second, I have just test it with ^15.6.1 and it works just fine. Double check your code.

[GusDeCooL]

ah i see, it was on react-dom not react. sorry, my bad :).

[Scott]

This isn't entirely true. You can add a custom attribute by prepending it with data- or aria-. See Luca's answer and/or the React Docs

[Scott]

This is the correct answer. You can add custom attributes by prepending them with either data- or aria-. See also: facebook.github.io/react/docs/dom-elements.html

[Kevin Farrugia]

I think this answer is misleading because the question is specific to custom attributes and the solution proposed by @peterjmag is the correct one.

[Spadar Shut]

@KevinFarrugia data attrubutes are still custom attributes, and adding attributes to a DOM via element.setAttribute('custom-attribute', 'some value'); isn't JSX at all.

[Morris S]

react 16 and on

[jcollum]

This feels like the most HTML5 compliant answer

[Luca Fagioli]

@MorrisS This is not correct, because it actually works since react 15.6.x.

[Nikos]

Why can you not do this on components so that the attr will be rendered on the first element in the render?

[Aminadav Glickshtein]

Your genius! Thanks.