React: False-positive mutation warning

[just-boris]

Given the following test case

function TestCmp() {
  return <span>{NaN}</span>;
}

ReactDOM.render(<TestCmp />, document.getElementById('app'));

Produces the following warning:

Warning: Component's children should not be mutated.
    in span (created by TestCmp)
    in TestCmp (created by Unknown)

This is probably caused by this mutation check, which was introduced in 15.3.0, but it doesn't work for NaN, because NaN != NaN

[zpao]

Yea, we should probably use Object.is (or an inlined polyfill for it).

[gbartlett9089]

Also having issues with this as well. I'm using Draft JS. Specifically with ordered and unordered list items. When I add either list block styles to a line, I receive a similar error:

 Component's children should not be mutated.
    in ul
    in div (created by DraftEditorContents)

It's being caused on line 32:

element._shadowChildren.length === element.props.children.length

It seems as if the shadowChildren array is empty but the element.props.children length is 1.

I followed the example here: https://github.com/facebook/draft-js/blob/master/examples/rich/rich.html although it is slightly modified using React.createClass({}) and is modularized into several separate files.

However, even when I copy and paste the example in, I'm still getting an error. Any ideas on why this may be occurring?

[vjeux]

cc @keyanzhang as you were looking at shadow children

[vinayakpatil]

+1

[raghavio]

having this issue as well

[hackerwins]

+1

[Pines-Cheng]

+1

[AndrejGajdos]

+1

[just-boris]

Could you please stop +1-ing?

The issue is confirmed, the fix is here: #7455

[aweary]

(You can instead just add a reaction directly to the original post, which makes it easier for us to sort by popularity)

[michaelsoriano]

+1
react 15.3.1

I'm simply doing a sort before passing to .map:

` render : function(){
var children = this.props.children;
children.sort(function(a,b){
return a.Title.toLowerCase().localeCompare(b.Title.toLowerCase());
})
...

`

[jimfb]

@michaelsoriano

The sort() method sorts the elements of an array in place

This _is_ a mutation, and is NOT a false positive. If you need a new array that you are going to mutate, you should create a copy of the old one. Do not mutate React's data.

[Pines-Cheng]

I meet this problem too，It is the same reason. Thank for you sharing。

[suchipi]

This issue has been closed, but the original test case still produces the warning for me (using jsfiddle via https://jsfiddle.net/reactjs/69z2wepo/)

[gaearon]

The issue gets closed when the bug is fixed in master.

By looking at the issue history, you will see that it got closed by #7455. If you open that PR and look at it milestone, it says "15.4.0".

This means that when 15.4.0 is out as a stable version, the issue will be fixed. In the meantime you can already use 15.4.0-rc.4.

[suchipi]

Ah, I missed the "in #7455"; sorry. Thanks for the clarification.

[gaearon]

No worries! Hopefully we'll get it out within a week or two but RC should be perfectly usable.