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

[jblarriviere]

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:

freeCodeCamp.org

[kevinSmith]

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.

[kevinSmith]

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.

[lasjorg]

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.

[kevinSmith]

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.

[jblarriviere]

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 ?

[lasjorg]

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.

[lasjorg]

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

freeCodeCamp Challenge Guide: Give Sibling Elements a Unique Key Attribute

Give Sibling Elements a Unique Key Attribute Hints Hint 1 It is just almost same as previous challenge. Just you need to add key attribute. Solutions

Solution 1 (Click to Show/Hide)

Add the key attribute to the <li> and give it a unique value. Using the array element as the key: const renderFrameworks = frontEndFrameworks.map((item) => <li key={item}>{item}</li> ); Using the array index as the key (should be avoided): const renderFrameworks = frontEndFrameworks.map((…

freeCodeCamp Challenge Guide: Use Array.filter() to Dynamically Filter an Array

Use Array.filter() to Dynamically Filter an Array Hints Hint 1 Use .filter() to create a new array that only shows users online. this.state.users.filter(user => user.online === true) Hint 2 Use .map() from previous the previous exercise to list out the online users and give them a unique key. usersOnline.map(user => <li key={user.username}>{user.username}</li>) Solutions

Solution 1 (Click to Show/Hide)

Both methods combined will first filter out the array, then list them individually. clas…

[jblarriviere]

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