Set key prop with crypto

Set a unique random ID key for each item of a list with crypto.randomUUID().

import React from 'react';

export const TodosList = (): JSX.Element => {
  const todos = [
    {
      userId: 1,
      title: 'delectus aut autem',
      completed: true,
    },
    {
      userId: 1,
      title: 'quis ut nam facilis et officia qui',
      completed: false,
    },
  ];

  return (
    <ul>
      {todos.map(({ userId, title, completed }) => {
        const id = crypto.randomUUID();

        return (
          <li key={id}>
            <div>Todo for user {userId}</div>
            <div>Title: {title}</div>
            <div>Completed: {completed ? 'Yes' : 'No'}</div>
            <div>UUID Key: {id}</div>
          </li>
        );
      })}
    </ul>
  );
};

• Todo for user 1
  Title: delectus aut autem
  Completed: Yes
  UUID Key: ceb44b1c-caac-4254-990b-5d5bc337ced6
• Todo for user 1
  Title: quis ut nam facilis et officia qui
  Completed: No
  UUID Key: 8b26df0a-9e2a-4363-b2d5-dc195dccbfb7