Non standard custom attributes in ReactJS?

Question

This is regarding non-standard attributes. https://facebook.github.io/react/docs/tags-and-attributes.html

In react I have done this:

 React.createElement('div', {image:'blah', etc:'blah'});

I need image and etc to be set on the element with setAttribute, and I need react to use its smarts to maintain it as it changes.

A solution here https://stackoverflow.com/a/21654914/1828637 says to add it on componentDidMount but this is not a solution. The attribute will not be maintained as it changes by the react framework.

Is there anyway to tell react to set the attribute on my custom tags?

Morris S · Accepted Answer · 2017-10-25 03:14:31Z

4

In react 16 custom attributes are now possible

// Your code:
<div mycustomattribute="something" />

// React 15 output:
<div /> 

// React 16 output:
<div mycustomattribute="something" />

react 16 custom attributes

answered Oct 25, 2017 at 3:14

Morris S

2,62430 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Eric O'Connell · Accepted Answer · 2016-01-21 04:16:17Z

2

This solution is to build on the linked answer by using the React lifecycle method componentWillReceiveProps to update the DOM element attributes with every change to props. For more information about all the lifecycle methods, see http://facebook.github.io/react/docs/component-specs.html.

(Since componentWillReceiveProps can be called more often than when the props actually change, you may wish to compare the props before actually setting them on the node.)

I've provide fiddle you can play with: https://jsfiddle.net/p4h267bo/ and the relevant part of the code is excerpted here:

var Hello = React.createClass({
  componentDidMount() {
    this.mirrorProps(this.props);
  },
  componentWillReceiveProps(nextProps) {
    this.mirrorProps(nextProps);
  },
  mirrorProps(props) {
    var node = ReactDOM.findDOMNode(this);
    node.setAttribute('name', props.name);
  },
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

answered Jan 21, 2016 at 4:16

Eric O'Connell

8585 silver badges14 bronze badges

8 Comments

Noitidart Over a year ago

Wow thank you so much for such a quick answer and it was superb! It worked fantastic I updated it to shouldMirrorProps in this fork of your fiddle - jsfiddle.net/Noitidart/wwLcbvfk - your fiddle helped me out immmmensely! This is a great answer I wish I could up vote you more so I fond your other answers and comments up voted them.

Noitidart Over a year ago

Will this work with componentWillUpdate as well? Or is componentWillUpdate only called if it is calculated that the DOM will change? Because some stuff I have in this.state that I want to mirror as attributes.

Eric O'Connell Over a year ago

Now that I think about it, it might be better to do it in componentDidUpdate, because at that point you will know that any changes to the DOM have been flushed (in case you have some conditionals that would result in the DOM node going away — the current implementation only works because the node is stable). Here's another fiddle!

Eric O'Connell Over a year ago

I forgot to mention, if you are doing any kind of shouldComponentUpdate checks, you may want to include both componentWillReceiveProps and componentDidUpdate to be sure. componentWillReceiveProps still has access to this.state, and state updates will trigger componentDidUpdate.

Eric O'Connell Over a year ago

Unless you use shouldComponentUpdate to short-circuit the update after setState, React will still call componentDidUpdate.

|

ohad serfaty · Accepted Answer · 2017-03-18 06:49:49Z

2

Another alternative is to change the name of the attribute to something that react supports (such as the data-* attributes) :

render() {
    return (
      <div data-image='blah' data-etc='blah' />
    );
}

link to other supported attributes: https://facebook.github.io/react/docs/dom-elements.html

answered Mar 18, 2017 at 6:49

ohad serfaty

6547 silver badges11 bronze badges

Collectives™ on Stack Overflow

Non standard custom attributes in ReactJS?

3 Answers 3

Comments

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related