af/JSnoX

The ^ feature

Closed this issue · 1 comments

albert-kam commented

Hi there,

I tried the ^ to have the key autogenerated, something like:

arr.map(function(arrItem, index) {
    return d('tr^', 
        d('td', arrItem)
        ); // td
}) // tr-s

but React gave me this error:

react-with-addons-15.3.js:22872 Warning: flattenChildren(...): Encountered two children with the same key, tr^. Child keys must be unique; when two children share a key, only the first child will be used.
in tbody (created by Constructor)
in table (created by Constructor)
in Constructor

And then i tried resorting to manual key-ing with

arr.map(function(arrItem, index) {
    return d('tr', { key: 'row' + index },   
        d('td', arrItem)
        ); // td
}) // tr-s

And it works just fine.

Here's the full code, i hope you dont mind:

<!DOCTYPE html>
<html>
    <head>
        <title>continuous scrolling with bounded rendering</title>
        <script src="/resources/js/react-with-addons-15.3.js"></script>
        <script src="/resources/js/react-dom-15.3.js"></script>
        <script src="/resources/js/jsnox.js"></script>
    </head>
    <body>
        <div id='content'></div>
        <script type="text/javascript">

            window.d = jsnox(React);
            var content = document.getElementById('content');
            var arr = [ 1, 2, 3];

            var MyTable = React.createClass({
                render: function() {
                    return d('table',
                        d('thead', 
                            d('tr',  
                                d('th', 'Index')
                            ) // tr
                        ), // thead
                        d('tbody',  
                            arr.map(function(arrItem, index) {
                                return d('tr', { key: 'row' + index }, 
                                    d('td', arrItem)
                                ); // td
                            }) // tr-s
                        ) // tbody
                    ) // table
                }
            })

            var dom = d(MyTable, {});
            ReactDOM.render(dom, content);
        </script>
    </body>
</html>
af commented

Hi,

The key is generated based on the string passed in ('tr^' in this case), so each of the tr siblings will have the same key, and this is why React is complaining. I recommend adding a class to each of the tr elements to avoid this issue, similarly to how you used the index in your working example. Here's an ES6 solution:

arr.map(function(arrItem, index) {
    return d(`tr.row${index}^`,
...

Hope that helps!