opendevs
Using Keys in Fragments

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 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 https://reactjs.org/link/warning-keys 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

Difficulty

easy

Solve the practice problems to earn    DevCoin image 
Coding Area
Output

Copyright © 2022 opendevs

Learn ● Develop ● Ace
All illustrations by Storyset