mirror of https://github.com/status-im/js-waku.git
Merge #745
745: update unique key to React list element in relay-reactjs-chat app r=D4nte a=tobyjaguar ## Problem When running the app on a development server, the React list of mapped messages produces a warning that the children in a list should have a unique key prop: <img width="1347" alt="Screen Shot 2022-05-17 at 4 02 23 PM" src="https://user-images.githubusercontent.com/16940072/168926247-ca331666-f23c-487b-9023-3c63eea35492.png"> ## Solution Add a unique key to the list element in the App.js component. ## Notes Any unique key will do here, but the timestamp seems to work unless the maintainers refactor for a better id. A timestamp may not be ideal if multiple messages with the same timestamp come in. Perhaps a uuid would work, but perhaps that is too heavy handed for an example, although this may be a choice for a production implementation. Co-authored-by: tobyjaguar <talgya@gmail.com> Co-authored-by: Franck Royer <franck@status.im>
This commit is contained in:
commit
8a84024c7d
|
@ -78,7 +78,7 @@ function App() {
|
|||
<ul>
|
||||
{messages.map((msg) => {
|
||||
return (
|
||||
<li>
|
||||
<li key={msg.timestamp.valueOf()}>
|
||||
<p>
|
||||
{msg.timestamp.toString()}: {msg.text}
|
||||
</p>
|
||||
|
|
Loading…
Reference in New Issue