Whats the point of using value+1 as a key instead of value

Tell us what’s happening:

Hi there, i’ve passed the tests by assigning {value} as a key to my

  • elements.
    The solution uses {value+1}.

    Could anyone explain what’s the point of the +1 plz ?

    Thanks !

    Your code so far

    
    frontEndFrameworks.map( (value) => <li key={value+1}>{value}</li>);
    
    

    Your browser information:

    User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:84.0) Gecko/20100101 Firefox/84.0.

    Challenge: Give Sibling Elements a Unique Key Attribute

    Link to the challenge:

  • Yup, I’m a professional React developer and that seems very odd to me. Maybe someone smarter than me can see a reason, but I can’t.

    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.

    That has to be a mistake.

    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 ?

    1 Like

    Yes, and the challenge tells you that as well. But just saying you can use the index and not showing how is not great either.

    I guess I can create two solutions one with the value (without the + 1 as that makes little sense) and one that shows it using the index.

    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

    2 Likes

    Sorry for the late answer. That looks much better !
    Thanks for taking the time to look into it !

    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.