This question evaluates frontend React skills including component state management, enforcing role-based constraints and invariants, handling user interactions (modals, add/block behavior), duplicate prevention, and deterministic sorting for stable ordering.
Implement a small React UI that allows a user to build a team from a list of players.
Goalkeeper
: min 1, max 1
Defender
: min 3, max 5
Midfielder
: min 2, max 5
Forward
: min 1, max 3
Assume you receive an array of players like:
type Player = {
id: string;
name: string;
role: string;
rating?: number;
bio?: string;
};
and a role-constraint map like:
type RoleRule = { min: number; max: number };
Record<string, RoleRule>
Implement the component(s) and state updates needed to support the behaviors above.