Using Keys in Fragments

Dogendar 🐶 hates warnings and whenever React warns him about something, he immediately attempts to fix it. But, today he's stuck and asking for your help.

He has a component that takes a prop usersData which is an array of objects containing information about users. An example array is given below

[
  { "id": "1", "name": "Ajay", "bio": "Ajay" },
  { "id": "2", "name": "Alok", "bio": "Alok" },
  { "id": "3", "name": "Mihir", "bio": "Mihir" }
]

Dogender wants to render the name and bio for users in a <h4> and <p> tag, respectively. Instead of rendering every user's details, he only wants to render the details of the users who name starts with the capital letter A. Also, since he doesn't like extra tags to wrap content, he wrapped the content in a React fragment, like

<>
  <h4>{name}</h4>
  <p>{bio}</p>
</>

He iterates over the list of users and return a fragment to wrap <h4> and <p> tags. But, he is getting a warning that looks like this

Warning: Each child in a list should have a unique "key" prop

Check the render method of `UsersList`. See https://reactjs.org/link/warning-keys for more information

He quickly understands that he needs to give a key prop but not sure where! He also notices that instead of users whose name starts with the captal letter A being rendered in the list, all the users from usersData are being rendered in the list.

Help Dogendar find the bug(s) in the component given below and fulfil these requirements:

• Remove the key prop warning
• Render a list of users whose name starts with captial letter A. Make sure you use fragment and don't introduce any extra tags to wrap the content of list item. Also, do not change the data-testid="root" used for root element in code below.

Solve this easy problem to earn  1