Using Keys in Lists
Solidify your knowledge of Lists and Keys by solving this problem.
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
numbersListprop) inside <li> tags
