Using Keys in Fragments

Render Two Lists

Dogendar 🐶 wants to hangout with his friend Dogelina but she is busy with her homework. Her homework is to finish implementation of a React component that renders two lists. Dogendar decides to help her finish homework faster so she can hangout with him.

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

[ { id: "1", name: "Dogendar", todos: [ { id: '1', data: "Look at some stonks data..." }, { id: '2', data: "Regret looking at stonks data :P" }, ...more elements ], }, ...more elements ]

He is supposed to iterate over the list of users and render the following HTML for each user

<div> <!-- Dogendar is user's name in this example --> <div>{name}</div> <div> <!-- First todo --> <div>Look at some stonks data...</div> <!-- Second todo --> <div>Regret looking at stonks data :P</div> <!-- More todos from user's todos list... --> </div> </div>

<!-- --> is a comment in HTML. You don't need to use it in actual React component implementation

Help Dogendar finish the component and fulfil these requirements:

  • Use keys in lists correctly. There should not be any missing key prop warning
  • Render the required list correctly according to specifications given in problem. Also, do not change the data-testid="root" used for root element in code below.



Solve the practice problems to earn    DevCoin image 
Coding Area

Copyright © 2022 opendevs

Learn ● Develop ● Ace
All illustrations by Storyset