opendevs logo

Using Keys in Lists

Solidify your knowledge of Lists and Keys by solving this problem.
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 numbersList which is an array of numbers, e.g. [1, 2, 3, 4]. It selects even numbers from the numbersList and renders a list of these selected even numbers inside <li> tags (<li>{number}</li>), wrapped in <ul> tag.

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 `NumberList`. See for more information

He tried to use key prop to fix the issue but it didn't work and the warning is still there. He also notices that instead of even numbers being rendered in the list, all the numbers from numbersList 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 even numbers (selected from numbersList prop) inside <li> tags

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