| CARVIEW |
- Courses
- Tutorials
- Practice
- Jobs
Lists and Keys in React
Test your skills on rendering lists in React with this quiz, focusing on using the map() function and understanding the importance of keys and best practices!
Question 1
Given a list of <TodoItem> components, where should you put the key?
On
<TodoItem>inside themap()
On the
<ul>elementOn
<li>inside<TodoItem>
On the parent component
Question 2
If two items in a list swap places but keep the same keys, React will:
Re-render both items
Destroy and recreate both items
Just move the items without re-rendering content
Throw a key mismatch warning
Question 3
Which method is commonly used to render a list in React?
forEach()
map()
filter()
reduce()
Question 4
How can you render a list of items in React using JSX?
<ul>{items.map(item => <li>{item}</li>)}</ul>
<ul><map>{items}</map></ul>
<ul>{map(item => <li>{item}</li>)}</ul>
<ul>{items}</ul>
Question 5
What happens if you don't assign keys to list elements in React?
React will throw an error
React will render the list but might not optimize the update process
The list will not render
React will assign random keys automatically
Question 6
What is the issue with this code in terms of key assignment?
const list = ["apple", "banana", "cherry"];
return (
<ul>
{list.map((fruit, index) => (
<li key={index}>{fruit}</li>
))}
</ul>
);
Using index as a key is fine in all cases
index should not be used as a key when the list can change dynamically
The key should always be a string
key should be assigned to the ul tag
Question 7
Which of the following is the correct syntax for rendering a list of components with unique keys in React?
{list.map(item => <Component key={item.id} />)}
{list.map(<Component key={item.id} />)}
{list.map(Component => <key={item.id} />)}
{list.map(<key={item.id}>Component</key>)}
Question 8
What is the output of the following code?
const items = ['Apple', 'Banana', 'Apple'];
return (
<ul>
{items.map((item, index) => <li key={index}>{item}</li>)}
</ul>
);
A list with duplicate keys
A list with unique keys
A list with no keys
An error due to duplicate keys
Question 9
What is the key used in this example?
const users = [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}];
return (
<ul>
{users.map(user => <li key={user.id}>{user.name}</li>)}
</ul>
);
user.name
user
user.id
index
Question 10
Which technique helps optimize large list rendering in React?
Using
forEach()Avoiding keys
List virtualization (e.g., React Window)
Randomly generating keys
There are 10 questions to complete.
