[React](/courses/reactjs) commonly renders lists by transforming an array into [JSX](/courses/reactjs) with [JavaScript](/courses/javascript)'s `map()` method. ### Basic Example Suppose you have an array of course names: ```jsx const courses = ["React", "JavaScript", "Next.js"]; ``` You can render them like this: ```jsx function CourseList() { const courses = ["React", "JavaScript", "Next.js"]; return (

{course}

); } ``` The result is conceptually: ```text React JavaScript Next.js ``` ### Why map() Is Commonly Used `map()` creates a new array by transforming each existing item. For React: ```text Array of data ↓ map() ↓ Array of React elements ↓ Rendered UI ``` For example: ```jsx const numbers = [1, 2, 3]; const items = numbers.map((number) => (

{number}

)); ``` ### Rendering Arrays of Objects Real applications usually work with objects rather than simple strings: ```jsx const courses = [ { id: "react", name: "React.js" }, { id: "javascript", name: "JavaScript" }, { id: "nextjs", name: "Next.js" } ]; ``` Render them with: ```jsx function CourseList() { return (

{course.name}

); } ``` ### Rendering a Component for Each Item The mapped result does not need to be a plain [HTML](/courses/html) element. ```jsx function CourseList({ courses }) { return (

{courses.map((course) => ( ))}

); } ``` ### Filtering Before Rendering You can combine normal [JavaScript](/courses/javascript) array methods: ```jsx {courses .filter((course) => course.published) .map((course) => ( ))} ``` ### Interview-Ready Answer React usually renders arrays by using `map()` to convert each data item into JSX. Each rendered item should also have a stable `key` so React can identify it between renders. Arrays can contain primitives or objects, and each item can render [HTML](/courses/html) elements or reusable React components.