The answer
You can return null from map to skip an item, but filtering the array before mapping is usually clearer and more efficient. Filter first, then map, so the render logic stays simple.
How to Render Lists in React Using .map() Correctly
How do I skip items when rendering a list in React?
More FAQs in How to Render Lists in React Using .map() Correctly
Call .map() on your array inside JSX wrapped in curly braces, returning an element for each item. Give every returned element a stable, unique key prop so React can update the list efficiently.
Keys help React identify which items changed, were added, or were removed. They let React match elements between renders so it updates only what changed instead of re-rendering the whole list.
Only for static lists that never change. For dynamic lists where items are added, removed, or reordered, index keys break reconciliation and cause subtle bugs, like inputs showing the wrong data. Use a stable unique id instead.
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.