Consider this React component that renders a list of fruits:
function FruitList() {
const fruits = ['Apple', 'Banana', 'Cherry'];
return (
<ul>
{fruits.map((fruit, index) => <li key={index}>{fruit}</li>)}
</ul>
);
}What will be rendered in the browser?
function FruitList() { const fruits = ['Apple', 'Banana', 'Cherry']; return ( <ul> {fruits.map((fruit, index) => <li key={index}>{fruit}</li>)} </ul> ); }
Look at what is inside the <li> tags inside the map function.
The component maps over the fruits array and renders each fruit as a list item. The key is set to the index, which is acceptable here. So the output is a list with each fruit as a separate <li>.
You want to render a list of numbers from 1 to 3 in React. Which code snippet will work without errors and render the numbers as list items?
Remember that map returns a new array, but forEach does not.
Option A uses map correctly and provides a unique key for each list item. Option A uses forEach which returns undefined, so React cannot render the list. Option A misses the key prop, which will cause a warning but still renders. Option A uses index without defining it, causing a ReferenceError.
Look at this React component:
function Colors() {
const colors = ['red', 'green', 'blue'];
return (
<ul>
{colors.map(color => <li>{color}</li>)}
</ul>
);
}When running this code, React shows a warning about keys. What is the cause?
function Colors() { const colors = ['red', 'green', 'blue']; return ( <ul> {colors.map(color => <li>{color}</li>)} </ul> ); }
React requires a special prop on list items to help identify them uniquely.
React needs a unique 'key' prop on each list item to optimize rendering and avoid warnings. Without keys, React cannot track which items changed, added, or removed.
Consider this React component that renders a list and a button to add an item:
import { useState } from 'react';
function TodoList() {
const [todos, setTodos] = useState(['Task 1', 'Task 2']);
function addTodo() {
setTodos([...todos, 'Task 3']);
}
return (
<div>
<ul>
{todos.map((todo, i) => <li key={i}>{todo}</li>)}
</ul>
<button onClick={addTodo}>Add Task</button>
</div>
);
}What will the list show after clicking the 'Add Task' button once?
import { useState } from 'react'; function TodoList() { const [todos, setTodos] = useState(['Task 1', 'Task 2']); function addTodo() { setTodos([...todos, 'Task 3']); } return ( <div> <ul> {todos.map((todo, i) => <li key={i}>{todo}</li>)} </ul> <button onClick={addTodo}>Add Task</button> </div> ); }
Think about how the state updates when the button is clicked.
Clicking the button calls addTodo, which adds 'Task 3' to the existing todos array. The component re-renders showing all three tasks.
In React, when rendering lists, developers often use the array index as the key prop like this:
{items.map((item, index) => <li key={index}>{item}</li>)}Why can this cause problems in some cases?
Think about what happens when the order of items changes but keys stay the same.
Keys help React identify which items changed. If keys are indexes, and the list order changes, React may confuse items and update the wrong ones, causing bugs or inefficient rendering.