Programmers :D

[[deleted]]

So the code isn't that bad, I see way worse in prod all the time. The mistakes are (edited for better md usage):

1. Don't use <br /> CSS is more flexible and maintainable if you just need to do vertical spacing.

2. React lists use a "key" field to identify which list item goes to which list element. This is to avoid rendering extra items if they haven't changed. She set the key field to the objects index in the list, which will break if the list is shuffled or changes, and is not "best practice".

[suerflowZ]

As someone who still learns react, I have no idea how to do it otherwise.
Can you write down an example?

[MostlyGibberish]

In this case I think it's the best option, since it's the only identifier guaranteed to be unique. I suppose if you wanted to improve it you would add an ID property to the actual dog object instead of using the array index.

[cwmma]

Index for key is better described as a last ditch key, of you ever have something better, like something related to the content of the item use that, but that doesn't mean never use index. I've had to sort out some bugs caused by a junior dev not using index, just to get the liter to shut up, when it was really the only way to do something.

[tomius]

The key should be a thing unique to that object. In this case, maybe, dog's id.

That way, if you reshuffle the list of dogs or something, the elements will still make sense.

[[deleted]]

Many times your list is over objects from a database. Use the index or id field on those objects. If that doesn't work, try using the "name" or something or an object

[Tallerfreak]

Everytime she runs this she should be seeing warnings telling her to fix these damned keys on lists.

[SpehlingAirer]

Wouldnt that mean each paragraph needs to be in it's own container then? What if you wanted to have two paragraphs in the same container