Bug | Incorrect display of user names in user list

Live Preview

Coding Workspace

import React, { useState } from "react";
import UserList from "./components/UserList";
import UserProfileForm from "./components/UserProfileForm";
import { UserProfile } from "./types";

const App: React.FC = () => {
  const [users, setUsers] = useState<UserProfile[]>([]);

  const handleAddUser = (user: UserProfile) => {
    setUsers((prevUsers) => [...prevUsers, user]);
  };

  return (
    <div className="p-4 max-w-4xl mx-auto">
      <UserProfileForm onAddUser={handleAddUser} />
      <UserList users={users} />
    </div>
  );
};

export default App;

beginner

Incorrect display of user names in user list

When viewing the list of users in the application, user IDs are displayed in place of user names. This results in confusion as the displayed identifier does not match user expectations. Additionally, a console warning regarding a missing 'key' prop suggests potential issues with list rendering performance and behavior.

Steps to Reproduce

Navigate to the user list page within the application.
Add a new user using the provided form.
Observe that the user ID is displayed instead of the user name in the list.
Check the developer console for warnings related to React key props.

Expected Behavior

The application should display the user's name for each entry in the user list. Additionally, there should be no warnings in the console related to the rendering of list items.

Need help?