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:
status-bors-ng[bot] 2022-05-20 00:32:21 +00:00 committed by GitHub
commit 8a84024c7d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 1 additions and 1 deletions

View File

@ -78,7 +78,7 @@ function App() {
<ul>
{messages.map((msg) => {
return (
<li>
<li key={msg.timestamp.valueOf()}>
<p>
{msg.timestamp.toString()}: {msg.text}
</p>