Each child in an array or iterator should have a unique “key” prop
was getting the warning message (
) in the below code using react.js. I checked answers on the stackoverflow and tried to remove the warning message but it didn't help.
Made a separate example with similar functionality in a static page and it is working fine. But, this code is throwing warning message. How to remove this warning message ?
<tbody>
list.map(function(value)
return(<tr className="gradeA" role="row">
<td className="sorting_1"> value.id </td>
<td>value.name</td>
<td>value.location</td>
</tr>);
)
</tbody>
javascript reactjs
asked Sep 26 '16 at 8:33
WorkerWorker
102212
add a comment |
was getting the warning message () in the below code using react.js. I checked answers on the stackoverflow and tried to remove the warning message but it didn't help.
Made a separate example with similar functionality in a static page and it is working fine. But, this code is throwing warning message. How to remove this warning message ?
<tbody>
list.map(function(value)
return(<tr className="gradeA" role="row">
<td className="sorting_1"> value.id </td>
<td>value.name</td>
<td>value.location</td>
</tr>);
)
</tbody>
javascript reactjs
asked Sep 26 '16 at 8:33
WorkerWorker
102212
add a comment |
was getting the warning message () in the below code using react.js. I checked answers on the stackoverflow and tried to remove the warning message but it didn't help.
Made a separate example with similar functionality in a static page and it is working fine. But, this code is throwing warning message. How to remove this warning message ?
<tbody>
list.map(function(value)
return(<tr className="gradeA" role="row">
<td className="sorting_1"> value.id </td>
<td>value.name</td>
<td>value.location</td>
</tr>);
)
</tbody>
javascript reactjs
asked Sep 26 '16 at 8:33
WorkerWorker
102212
was getting the warning message () in the below code using react.js. I checked answers on the stackoverflow and tried to remove the warning message but it didn't help.
Made a separate example with similar functionality in a static page and it is working fine. But, this code is throwing warning message. How to remove this warning message ?
<tbody>
list.map(function(value)
return(<tr className="gradeA" role="row">
<td className="sorting_1"> value.id </td>
<td>value.name</td>
<td>value.location</td>
</tr>);
)
</tbody>
javascript reactjs
javascript reactjs
asked Sep 26 '16 at 8:33
WorkerWorker
102212
asked Sep 26 '16 at 8:33
WorkerWorker
102212
asked Sep 26 '16 at 8:33
WorkerWorker
102212
asked Sep 26 '16 at 8:33
WorkerWorker
102212
asked Sep 26 '16 at 8:33
WorkerWorker
102212
102212
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
You just need to add a unique key to the returned component from map. In your map function receive define another parameter as key and for each tr that you return just add key=key as a prop.
<tbody>
list.map(function(value, key)
return(<tr className="gradeA" role="row" key=key>
<td className="sorting_1"> value.id </td>
<td>value.name</td>
<td>value.location</td>
</tr>);
)
</tbody>
answered Sep 26 '16 at 8:38
Shubham KhatriShubham Khatri
88.4k15109147
Thanks @ShubhamKhatri, was adding the same in the wrong place that is why was not able to remove the warning message. It worked now.
– Worker
Sep 26 '16 at 8:42
No problem, Happy to help :)
– Shubham Khatri
Sep 26 '16 at 8:43
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f39698073%2feach-child-in-an-array-or-iterator-should-have-a-unique-key-prop%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You just need to add a unique key to the returned component from map. In your map function receive define another parameter as key and for each tr that you return just add key=key as a prop.
<tbody>
list.map(function(value, key)
return(<tr className="gradeA" role="row" key=key>
<td className="sorting_1"> value.id </td>
<td>value.name</td>
<td>value.location</td>
</tr>);
)
</tbody>
answered Sep 26 '16 at 8:38
Shubham KhatriShubham Khatri
88.4k15109147
Thanks @ShubhamKhatri, was adding the same in the wrong place that is why was not able to remove the warning message. It worked now.
– Worker
Sep 26 '16 at 8:42
No problem, Happy to help :)
– Shubham Khatri
Sep 26 '16 at 8:43
add a comment |
You just need to add a unique key to the returned component from map. In your map function receive define another parameter as key and for each tr that you return just add key=key as a prop.
<tbody>
list.map(function(value, key)
return(<tr className="gradeA" role="row" key=key>
<td className="sorting_1"> value.id </td>
<td>value.name</td>
<td>value.location</td>
</tr>);
)
</tbody>
answered Sep 26 '16 at 8:38
Shubham KhatriShubham Khatri
88.4k15109147
Thanks @ShubhamKhatri, was adding the same in the wrong place that is why was not able to remove the warning message. It worked now.
– Worker
Sep 26 '16 at 8:42
No problem, Happy to help :)
– Shubham Khatri
Sep 26 '16 at 8:43
add a comment |
You just need to add a unique key to the returned component from map. In your map function receive define another parameter as key and for each tr that you return just add key=key as a prop.
<tbody>
list.map(function(value, key)
return(<tr className="gradeA" role="row" key=key>
<td className="sorting_1"> value.id </td>
<td>value.name</td>
<td>value.location</td>
</tr>);
)
</tbody>
answered Sep 26 '16 at 8:38
Shubham KhatriShubham Khatri
88.4k15109147
You just need to add a unique key to the returned component from map. In your map function receive define another parameter as key and for each tr that you return just add key=key as a prop.
<tbody>
list.map(function(value, key)
return(<tr className="gradeA" role="row" key=key>
<td className="sorting_1"> value.id </td>
<td>value.name</td>
<td>value.location</td>
</tr>);
)
</tbody>
answered Sep 26 '16 at 8:38
Shubham KhatriShubham Khatri
88.4k15109147
answered Sep 26 '16 at 8:38
Shubham KhatriShubham Khatri
88.4k15109147
answered Sep 26 '16 at 8:38
Shubham KhatriShubham Khatri
88.4k15109147
answered Sep 26 '16 at 8:38
Shubham KhatriShubham Khatri
88.4k15109147
88.4k15109147
Thanks @ShubhamKhatri, was adding the same in the wrong place that is why was not able to remove the warning message. It worked now.
– Worker
Sep 26 '16 at 8:42
No problem, Happy to help :)
– Shubham Khatri
Sep 26 '16 at 8:43
add a comment |
Thanks @ShubhamKhatri, was adding the same in the wrong place that is why was not able to remove the warning message. It worked now.
– Worker
Sep 26 '16 at 8:42
No problem, Happy to help :)
– Shubham Khatri
Sep 26 '16 at 8:43
Thanks @ShubhamKhatri, was adding the same in the wrong place that is why was not able to remove the warning message. It worked now.
– Worker
Sep 26 '16 at 8:42
Thanks @ShubhamKhatri, was adding the same in the wrong place that is why was not able to remove the warning message. It worked now.
– Worker
Sep 26 '16 at 8:42
No problem, Happy to help :)
– Shubham Khatri
Sep 26 '16 at 8:43
No problem, Happy to help :)
– Shubham Khatri
Sep 26 '16 at 8:43
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f39698073%2feach-child-in-an-array-or-iterator-should-have-a-unique-key-prop%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
