alamenai / react-spot-the-mistake

Learn React by spotting the mistakes on screenshots.

React Spot The Mistake

---

I post <Spot the mistake in #react code> on my Linkedin, which I'll also post here!

From basic to advanced: test how well you know React, refresh your knowledge a bit or prepare for your coding interview! 💪 🚀 I update this repo regularly with new questions. I added the best answer and the linkedin profile of the person who answered it in the collapsed sections below the questions, simply click on them to expand it. It's just for fun, good luck! ❤️

---

POST 1

Best Answer

By : Amirhosein Zare

Using index as key when mapping and returning elements in React it will cause errors in the future when you wish to update or delete one of them.

React usesindex in mapping so it can specify elements from each other. If you use index as keys, whenever you delete one of the elements, the indexes will be used wrongly for other elements, so it will cause unpredictable errors and bugs, especially whenever you are using third parties.

If your list wont be updated or modified, and it will be statics and constant so there is no problem using indexes as keys but it's always a best practice to use unique keys.

If you dont have already some kind of databse ids or any uniqe identifiers you can use libraries that generate uniqe ids such as uuid and be sure the will be no errors or bugs.

And there is no error for returning an array of elements in a React component You are allowed to return an array (an array of any type) as output in your React component.

POST 2

Best Answer

By : Amin Awinti

❌ laptopsList: will be treated as a built-in DOM element.

✅ LaptopsList: All React component names must start with a capital letter.

Considering key values, REZAZI MOHAMED ABDESSAMED, i think using random values is a bad practice, because it will cause the item to re-mount on every render, but not really a "mistake" for such static list, imo. .