Transforming Data with map
Use .map() to turn one array into another by transforming every item — the single most important array method in React, where it powers every rendered list.
map: one array in, a new array out
.map() takes an array, runs a function on every item, and returns a new array of the transformed results — same length, same order, new values. The original is untouched.
const prices = [10, 20, 30];
const withTax = prices.map((price) => price * 1.16);
// [11.6, 23.2, 34.8]This is the method you'll use most in React. Remember rendering a list there? {posts.map((post) => <li>{post.title}</li>)} — that's map turning an array of data into an array of UI. Learn it cold here and React lists become second nature.
map is a factory conveyor belt. Raw items go in one end, each passes through the same machine (your function), and a finished item comes out — one out for every one in. Three items in, three items out.map always returns an array of the same length as the original — one result per item. If you want to remove items, that's filter (next lesson), not map. And map never changes the original array; it builds a new one.