How to Add Custom HTML Attributes in Jsx

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:

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

Custom HTML attributes on React component

React element doesn't necessarily correspond to DOM element that could have HTML attributes. React component can be rendered to multiple DOM elements or no elements at all.

If Child should be able to provide additional props or attributes to child DOM element, it should pass them explicitly:

const Child = props => <div className="child" {...props} />

This way data-custom="foo" will be passed to <div>.

How can I add a custom attribute to React's HTMLAttributes from a library?

First of all, I am not a TypeScript user myself (though I've dealt with it a little bit in working with third-party packages), so I apologize if this answer betrays some of my ignorance in this area.

It seems that you are trying to put an inappropriate responsibility on your library. It makes sense to me that your library should be able to say that foo is a valid property for a div within one of the library's components, but you seem to be suggesting that the library should be able to have a side-effect of changing the validation of elements that are NOT produced by components of the library.

To make sure the distinction is clear. It seems natural for me for the library to have something like (assuming that the appropriate TypeScript would be applied to make this valid):

// library code
export const LibComponent1 = (props) => {
   return <div foo="bar">{props.children}</div>
}

and then allow a consumer to use LibComponent1 without issue. But it seems like bad library behavior to allow changing the TypeScript validation for all divs in components defined outside of the library to allow a property of "foo". If multiple libraries did things like this, they could easily conflict with one another or hide issues in other code.

React Typescript - Adding custom attribute

in react 16+ it is possible, see

probem is that typescript didnt know about it(yet)

but you can still add @ts ignore for typechecking

{ //@ts-ignore
  <span name="I'm causing a type error" data-test="I'm Working"/>
}

How to add custom attributes in an element without JSX (just using createElement method)?

The following example uses the key prop and so, it will not show the warning.

function TodoItem({ arr }) {  return arr.map(item =>    React.createElement(      "div",      {        key: item.id, // <--- Put the key prop here.        className: "todo-item"      },      React.createElement("input", { type: "checkbox" }, null),      React.createElement("p", null, item.text)    )  );}
const data = [  { id: 1, text: "Box 1" },  { id: 2, text: "Box 2" }];
const rootElement = document.getElementById("root");ReactDOM.render(React.createElement(TodoItem, { arr: data }), rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script><div id="root"></div>

---

Related Topics