Relational State Indexing with JavaScript Maps in React

import { useState } from 'react';
 
export function UserDirectory({ initialUsers }) {
  const [usersById, setUsersById] = useState(() => 
    new Map(initialUsers.map(user => [user.id, user]))
  );
 
  const updateRole = (userId, newRole) => {
    setUsersById(prevMap => {
      const user = prevMap.get(userId);
      if (!user || user.role === newRole) return prevMap;
      const nextMap = new Map(prevMap);
      nextMap.set(userId, { ...user, role: newRole });
      return nextMap;
    });
  };
 
  const userList = Array.from(usersById.values());
 
  return (
    <ul>
      {userList.map(user => (
        <li key={user.id}>
          {user.name} ({user.role})
          <button onClick={() => updateRole(user.id, 'admin')}>Promote</button>
        </li>
      ))}
    </ul>
  );
}