React not updating attribute on re-rendering

Question

I have a React element with a name attribute and child text, both of which are taken from the same value in props.

When re-rendering a React component with a different prop value, only the child text is updated, but the name attribute stays the same:

var Inner = React.createClass({
    render: function () {
      var name = this.props.name;
      return ( <div name={name}>{name}</div> );
    }
});

React.render(<Inner name="red"/>, document.getElementById('outer'));
// element is now <div name="red" data-reactid=".0">red</div>

React.render(<Inner name="green"/>, document.getElementById('outer'));
// element is now <div name="red" data-reactid=".0">green</div>

As you can see, after the second call to React.render, the name attribute is still red. (see http://jsfiddle.net/chyp9mxL/)

This problem can be resolved by adding a key={name} in the render function, but I don't see why I have to. Aren't keys only needed when we have multiple components? We only have one here.

I'm trying to figure out why you have two React.render()... — Chris
– Chris, Commented Sep 15, 2016 at 10:02
This is working fine with the new version of react and react-dom. So, include react-dom and call ReactDOM.render instead of React.render and that should do it. — Franco Risso
– Franco Risso, Commented Sep 15, 2016 at 12:20
@Chris Just to provide the simplest example to illustrate the problem. I imagine in real life the second render would be triggered by some user action. — jmak
– jmak, Commented Sep 15, 2016 at 12:22
@FrancoRisso you are right. I tried it with v15.3.1 and it seems to have fixed the problem. Thanks! — jmak
– jmak, Commented Sep 18, 2016 at 5:40

Mihir · Accepted Answer · 2016-09-15 10:03:22Z

3

Is it because div does not recognize name as a valid prop? I remember reading that passing illegal props to native DOM elements may give unexpected results.

Adding key as a prop simply would have given that div an identity. So React could identify that child and update the value properly.

The key here is to understand not everything in the DOM has a representation in React "Virtual DOM" and, because direct manipulations of the DOM (like a user changing an value or a jQuery plugin listening an element) are unnoticed by React, not using unique and constant keys will end up with React recreating the DOM node of a component when the key is not constant (and losing any untracked state in the node) or reusing a DOM node to render another component when the key is not unique (and tying its state to this other component).

Says this article. But it's really strange! I hope someone comes up with a proper explanation.

answered Sep 15, 2016 at 10:03

Mihir

3,9223 gold badges28 silver badges30 bronze badges

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

3 Comments

Season Over a year ago

Looks like so since rendering <input> instead correctly picks up the name attribute.

jmak Over a year ago

Thanks. Even if the attribute is illegal, this behaviour is inconsistent. Looks like it's a bug that has been fixed in the latest version of React.

Mihir Over a year ago

@jmak Can you drop a link that can verify this? Would love to know!

user5738822 · Accepted Answer · 2016-09-15 17:25:33Z

0

Because div is not a react component, you can just pass props to react components! You need read more about react prop,here is react props documents.

answered Sep 15, 2016 at 17:25

user5738822

Collectives™ on Stack Overflow

React not updating attribute on re-rendering

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related