The answer
Keys help React identify which items changed. When you map an array to elements, every item needs a unique stable key. Forgetting keys or using the array index can cause subtle bugs when the list is reordered or updated.
Common JSX Mistakes Beginners Make (and How to Avoid Them)
Why does my React list need keys?
More FAQs in Common JSX Mistakes Beginners Make (and How to Avoid Them)
Because JSX is JavaScript and class is a reserved word. Use className for the HTML class attribute and htmlFor for the for attribute to avoid the conflict.
Yes. In JSX, every tag must be closed, either with a closing tag or as a self-closing tag with a slash. Tags like img and input that are self-closing in HTML still need the closing slash in JSX.
No. JSX curly braces accept expressions, not statements. Use a ternary for conditions inside JSX, or compute the value before the return statement and reference it in curly braces.
Still have questions?
Browse all our FAQs or reach out to our support team
Want to upskill yourself?
Your learning library
Small steps. Big possibilities.
Find your next course. Build something great.