How to Render Lists in React with map()
Turn an array into a row of elements with the map method. Learn why every list item needs a stable key and when the index is not safe to use.
Build modern UIs with React
Turn an array into a row of elements with the map method. Learn why every list item needs a stable key and when the index is not safe to use.
An empty array should not render an empty page. Learn how to show fallback UI when a React list has no items, and keep the check readable.
Fragments group JSX elements without adding a wrapper to the DOM. Learn when to use the empty tag and when you need the full Fragment import.
JSX comments, camelCase attributes, and style objects each follow a small rule. Learn all three so your markup stays readable and valid.
A React component can only return one value, because JSX compiles to JavaScript objects. Learn why, and how fragments lift the limit.
Every React screen update moves through render and commit. Learn what each phase does, why rendering must be pure, and when the DOM changes.
StrictMode runs extra development-only checks that reveal impure rendering and missing Effect cleanup. Learn what it does and why it stays out of production.
JSX errors are terse but consistent. Learn what unexpected token and invalid children mean, plus the fixes for the most common JSX syntax mistakes.
Props let a parent component pass data down to its children. Learn how to pass props in React, read them with destructuring, and set default values.
Props are read-only inputs a parent passes down. State is private memory a component owns and updates. Learn the difference that matters and how to choose.
JSX is a value, so you can pass it as a prop like any other data. Learn how to pass JSX as a prop in React to build flexible, reusable components.
Use an aria-live region to announce content changes to screen reader users, choosing polite or assertive and announcing the right amount.