"Each child in the array must have a unique key hint" only on the first page rendering

Question

I have <tr>a link <td>inside consisting of all users registered on Instagram. <tr>a unique key is provided, and when I first load the page, I warn that each child does not have a unique key. However, when I move away from this page or when I delete the account / re-subscribe via Instagram to list the account in the table, the warning no longer appears. Why is this happening? I am 99% sure that the key is also unique, because I registered it with the console to check that everyone <tr>has a different key.

Warning. Each child in the array must have a unique "key" support. Check the renderComponent call with.

This is a bummer that I can’t track, where the warning comes from the console ...

Code example:

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 1

You need to add the key property in which you are rendering <component2>, and not where you define 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>
        )
})