HomeTracks
Explorer···
▼THEEBUG
Completed0/6
Score0
JSXlesson6.jsx×
THEEBUG›lesson6.jsx
1
function FruitList({ fruits }) {
2
return (
3
<ul>
4
{fruits.map((fruit) => (
5
<li ______={fruit}>{fruit}</li>
6
))}
7
</ul>
8
);
9
}
⊕⋮
$[system] Theebug ready. Happy coding!
Code BlocksDrag blocks into the drop zones above
4 blocks available
key
id
index
name
Game Panel
0:000 pts
Level 6 of 6Rendering Lists & Keys
0/1 slots correct
Objective
Add the key prop React needs to track each item in the rendered list
Expected Output
apple
banana
cherry
Debug says:
Whenever you .map() over data to render a list of elements, React needs one special prop on the outermost element to tell items apart between renders. Which prop is it?
Debug the Worm