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
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
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
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.