The only think that I can think of is that originally someone was using index for the key (a bad idea, btw) and added 1 to it (for some reason) and it just got left in there when they switched to value.
The challenge talks about using the index, so that would make the most sense to show in the solution code.
I updated the solution to use the index.
Edit: Not really sure if we should use the value or the index. But because the challenge talks about using the index I think we should show using the index in at least one solution.
I would rather use the value. Using the index is considered bad practice in React. For a static list it isn’t a problem, but if the list is being manipulated, it might confuse React and prevent some of its optimizations. According to React best practice, the key should be something that uniquely identifies that element and should be invariable. In this case, the text makes sense.
I’d rather use the value as well, React documentation recommends not using index unless we have no other choice.
It is also specified in the challenge description :
Normally, you want to make the key something that uniquely identifies the element being rendered. As a last resort the array index may be used, but typically you should try to use a unique identification.
The solution of the next challenge also need to be modified (value+1 issue). Do I need to open a new forum post for this issue ?
I just added both methods to the one solution, I think it’s fine. I also added a link to the React docs.
I updated the next challenge as well to use the array element. I also switched the i to user and changed it to use the strict equality operator instead as well.
Edit: Here are the links to both hint articles just in case
In this situation, each item is unique, but in some use cases, the items aren’t unique. What I’ve done in the past with Vue is use the item + index as the key. Where the array is firstNames = ["Tom", "Bob", "Jim", "Tom"], you’d end up with a non-unique key with “Tom”.
Alternately, firstNames.map((value, index) => <li key={value + '-' + index}>{value}</li>)
results in Tom-0, Bob-1, Jim-2, Tom-3 for the keys, and even with duplicate items, the key is still unique.