React Keys: Replace uuid package with crypto.randomUUID (#28700)

Co-authored-by: MaoShizhong <[email protected]>

react/getting_started_with_react/keys_in_react.md

@@ -42,14 +42,14 @@ Keys are passed into the component or a DOM element as a prop. You should alread
 <div key={keyValue} />
 ```
 
-<span id="keys-from-data">Now that we know the syntax, the next question is: what should be used as a key? Ideally, they should be some identifier that is unique to each item in the list. Most databases assign a unique id to each entry, so you shouldn't have to worry about assigning an id yourself. If you are defining data yourself, it is good practice to assign a unique `id` to each item. You may use the [uuid package](https://www.npmjs.com/package/uuid) to generate a unique id. Let's look at an example:</span>
+<span id="keys-from-data">Now that we know the syntax, the next question is: what should be used as a key? Ideally, they should be some identifier that is unique to each item in the list. Most databases assign a unique id to each entry, so you shouldn't have to worry about assigning an id yourself. If you are defining data yourself, it is good practice to assign a unique `id` to each item. You can use the [crypto.randomUUID() function](https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID) to generate a unique id. Let's look at an example:</span>
 
 ```jsx
 // a list of todos, each todo object has a task and an id
 const todos = [
-  { task: "mow the yard", id: uuid() },
-  { task: "Work on Odin Projects", id: uuid() },
-  { task: "feed the cat", id: uuid() },
+  { task: "mow the yard", id: crypto.randomUUID() },
+  { task: "Work on Odin Projects", id: crypto.randomUUID() },
+  { task: "feed the cat", id: crypto.randomUUID() },
 ];
 
 function TodoList() {
@@ -79,21 +79,21 @@ function MonthList() {
 }
 ```
 
-<span id="anti-pattern">Keys are straightforward to use, though there is an anti-pattern you should be aware of. Keys should never be generated on the fly. Using `key={Math.random()}` or `key={uuid()}` *while* rendering the list defeats the purpose of the key, as now a new `key` will get created for every render of the list. As shown in the above example, `key` should be inferred from the data itself.</span>
+<span id="anti-pattern">Keys are straightforward to use, though there is an anti-pattern you should be aware of. Keys should never be generated on the fly. Using `key={Math.random()}` or `key={crypto.randomUUID()}` *while* rendering the list defeats the purpose of the key, as now a new `key` will get created for every render of the list. As shown in the above example, `key` should be inferred from the data itself.</span>
 
 ```jsx
 const todos = [
-  { task: "mow the yard", id: uuid() },
-  { task: "Work on Odin Projects", id: uuid() },
-  { task: "feed the cat", id: uuid() },
+  { task: "mow the yard", id: crypto.randomUUID() },
+  { task: "Work on Odin Projects", id: crypto.randomUUID() },
+  { task: "feed the cat", id: crypto.randomUUID() },
 ];
 
 function TodoList() {
   return (
     <ul>
       {todos.map((todo) => (
         // DON'T do the following i.e. generating keys during render
-        <li key={uuid()}>{todo.task}</li>
+        <li key={crypto.randomUUID()}>{todo.task}</li>
       ))}
     </ul>
   );