multiple children with same key: warning message prepends '.$' to actual key value

[go-oleg]

If multiple children have the same key, for example (jsfiddle):

var Hello = React.createClass({
    render: function() {
        return (<ul>
        <li key={"1"}>what</li>
        <li key={"1"}>what</li>
        </ul>
        )
    }
});

React prints the following warning to the console:

Warning: flattenChildren(...): Encountered two children with the same key, `.$1`. Child keys must be unique; when two children share a key, only the first child will be used.

The key referenced in the warning prepends an internal-looking '.$' to the key specified by the user. This is a bit misleading - ideally, it would mention the exact key value set by the user.

[jimfb]

User-specified keys undergo an escaping transformation to prevent collisions with automatically-generated keys. For instance, if your li element had the key 1=::=2, the key in the warning would be .$1=0=2=2=02. This happens during traversal, so flattenChildren gets the already-escaped keys and doesn't have access to the original keys.

But yes, auto-generated keys are completely internal (never user visible) and are guaranteed to never conflict (because they are generated, and user keys are escaped), so I don't see a reason why we couldn't report the original key name in warning messages.

Probably the best solution would be to un-escape the key before reporting the error message. We would want to move key escaping/unescaping into a KeyEscapeUtils utility that provides an escapeKey and unescapeKey function.

[hkal]

If no one minds, I'd like to give this a go.