homerboy homerboy - 4 months ago 12
HTML Question

"Each child in an array should have a unique key prop" only on first time render of page

I have a

<tr>
with a bunch of
<td>
inside that consists of all users logged in through Instagram. The
<tr>
is provided a unique key and when I first load the page, I am warned of each child not having a unique key prop. However, when I navigate away from that page OR when I delete the account/re-sign in through Instagram to list the account in the table, the warning doesn't come up anymore. Why does this happen? I'm 99% certain that the key is also unique because I console logged it to check that each
<tr>
has a different key.

Warning: Each child in an array should have a unique "key" prop. Check the renderComponent call using .

It's a bummer that I can't trace to where the warning is coming from from the console...

Sample code:

component1 = React.createClass({
render: () ->
# A lot of table stuff here
_.chain(@state.users).map((x) -> <component2 profile={x} />),@).value()
)}

component2 = React.createClass({
render: () ->
return (
<tr key={@props.profile.id}
<td>Blah</td>
<td>Blah</td>
<td>Blah</td>
</tr>
)
})

Answer

You need to add the key property where you are rendering <component2>, not where you are defining it:

component1 = React.createClass({
    render: () ->
        # A lot of table stuff here
        _.chain(@state.users).map((x) -> <component2 profile={x} key={x.id} />),@).value()
)}

component2 = React.createClass({
    render: () ->
        return (
            <tr>
                <td>Blah</td>
                <td>Blah</td>
                <td>Blah</td>
            </tr>
        )
})
Comments