Key prop

πŸ‘¨β€πŸ’Ό Great work. That was super weird and confusing for our users. They're much happier now.
πŸ¦‰ The key only needs to be unique within a given array. So this works fine:
const element = (
	<ul>
		{list.map(listItem => (
			<li key={listItem.id}>{listItem.value}</li>
		))}
	</ul>
)
In our example, the value of the input is managed by the browser, but this has even bigger implications when we start working with our own state and side-effects. It's a little too early to demonstrate this for you, but you should know that when React removes a component from the DOM, it gets "unmounted" which will trigger side-effect cleanups, and if new elements are added then those will be "mounted" and will trigger your side-effects. This can cause some surprising and problematic issues for your users.
So just remember the rule and always provide a key when rendering an array. Later when you have more React experience, you can come back to this exercise and expand it a bit with custom components that manage state and side-effects to observe the problems caused when you ignore the key.

Access Denied

You must login or register for the workshop to view the diff.

Check out this video to see how the diff tab works.