opendevs logo

Using Keys in Fragments

Solidify your knowledge of Lists and Keys by solving this problem.
Using Keys in Lists

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 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  DevCoin image
Coding Area
opendevs logo
CoursesFAQsContact UsPrivacy PolicyTerms Of Service
Copyright © 2023 opendevs
Learn ● Develop ● Ace
All illustrations by Storyset