Faq’s React List

This React warning appears when you render an array of JSX elements without providing a key prop on each element. React needs keys to efficiently track which items have changed, been added, or been removed. To fix it, add a key attribute to the outermost element returned from your .map() callback. Use a unique, stable value from your data — like a database ID or a slug. Example: <li key={item.id}>{item.name}</li>

Using the index as a key is only safe when all three of these conditions are met: (1) the list is static and never reordered, (2) no items are ever inserted in the middle, and (3) no items are ever deleted. If any of those change, index-as-key causes React to mis-identify items, leading to broken animations, stale state in child inputs, and incorrect UI updates. For any dynamic list — which is most lists in real apps — always use a stable unique ID.

Using key={Math.random()} is one of the worst anti-patterns in React. Because Math.random() generates a new value on every render, every list item gets a brand new key on every render. React sees these as entirely new elements, and unmounts and remounts the entire list from scratch on every state change. This destroys component-level state (typed values, focus, scroll position), triggers every useEffect with [] on every render, and completely kills performance. Always use stable, predictable keys.

The key prop is a reserved React attribute — it is consumed entirely by React’s reconciliation system and is never passed through to your component’s props object. Accessing props.key always returns undefined. If your component needs the item’s ID, pass it as a separate explicit prop alongside the key: <Item key={item.id} id={item.id} data={item} />. Then access it via props.id.

React’s useState hook triggers a re-render only when it detects that the state reference has changed. If you mutate an array directly (e.g., items.push(newItem)), the array reference stays the same, React sees no change, and the UI does not update. You must always return a new array: use spread ([...items, newItem]) to add, .filter() to remove, or .map() to update. This creates a new reference that React detects and re-renders for.

Be careful with the logical AND (&&) operator when your array length or values include 0. For example, {scores.length && <List />} renders “0” when the array is empty because 0 is a valid React child. Fix this by using an explicit boolean comparison: {scores.length > 0 && <List />} or use a ternary: {scores.length ? <List /> : null}. When rendering numbers in list items, they render correctly as {0} appears as “0” in the DOM, which is expected.

Wrap the handler in an inline arrow function inside .map() to pass the item’s ID or the item itself: onClick={() => handleSelect(item.id)}. Alternatively, use a data-id attribute: data-id={item.id} and read it in the handler via e.currentTarget.dataset.id. The arrow function approach is more type-safe and idiomatic in modern React. If the item is its own component, pass the handler as a prop.

If your API returns items without unique IDs, add them yourself when you receive the data — before storing in state. Use the uuid library: const items = apiData.map(item => ({ ...item, id: uuidv4() })). Add the IDs once when the data arrives (e.g., in useEffect or your fetch callback) and store the augmented array in state. Do NOT generate the UUID inside .map() during render — that creates a new ID on every render, defeating the purpose.

.map(item => JSX) — transforms every item into JSX. Output array has the same length as input. Used for rendering. .filter(condition) — removes items that don’t match a condition. Output array is shorter or equal. Used to narrow down what is rendered. .reduce(fn, initial) — accumulates items into a single value (object, number, grouped object). Used to group, count, or reshape data before rendering. In practice, you chain them: data.filter(...).sort(...).map(...).

Use useState for the data, loading, and error states, and useEffect to fetch on mount. Always handle loading and error before rendering the list:

const [data, setData]       = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError]     = useState(null);

useEffect(() => {
  fetch('/api/courses')
    .then((r) => r.json())
    .then(setData)
    .catch(setError)
    .finally(() => setLoading(false));
}, []);

if (loading) return <Spinner />;
if (error)   return <p>Error loading data.</p>;
return <ul>{data.map((c) => <li key={c.id}>{c.title}</li>)}</ul>;

For drag-and-drop lists, use a dedicated library rather than building from scratch. The most popular options are: dnd kit (@dnd-kit/core) — modern, accessible, and highly customizable; react-beautiful-dnd — widely used, great defaults, but archived by Atlassian; and react-sortable-hoc — HOC-based. The pattern: (1) wrap your list in a drag context, (2) make each item draggable and define a drop target, (3) on drag end, reorder your state array using the arrayMove utility and call setItems(reorderedArray). Keys are critical here — they must be stable IDs, never indices, so React correctly tracks elements during reordering.