Given a list of <TodoItem> components, where should you put the key?

On <TodoItem> inside the map()

On <li> inside <TodoItem>

What is the issue with this code in terms of key assignment? JavaScript const list = ["apple", "banana", "cherry"]; return ( <ul> {list.map((fruit, index) => ( <li key={index}>{fruit}</li> ))} </ul> );

index should not be used as a key when the list can change dynamically

Using index as a key is fine in all cases

The key should always be a string

key should be assigned to the ul tag

Full Stack Dev CourseExplore

Lists and Keys in React

Last Updated :

Discuss

Comments

Question 1

Given a list of <TodoItem> components, where should you put the key?

A
On <TodoItem> inside the map()
B
On the <ul> element
C
On <li> inside <TodoItem>
D
On the parent component

Question 2

If two items in a list swap places but keep the same keys, React will:

A
Re-render both items
B
Destroy and recreate both items
C
Just move the items without re-rendering content
D
Throw a key mismatch warning

Question 3

Which method is commonly used to render a list in React?

A
forEach()
B
map()
C
filter()
D
reduce()

Question 4

How can you render a list of items in React using JSX?

A
<ul>{items.map(item => <li>{item}</li>)}</ul>
B
<ul><map>{items}</map></ul>
C
<ul>{map(item => <li>{item}</li>)}</ul>
D
<ul>{items}</ul>

Question 5

What happens if you don't assign keys to list elements in React?

A
React will throw an error
B
React will render the list but might not optimize the update process
C
The list will not render
D
React will assign random keys automatically

Question 6

What is the issue with this code in terms of key assignment?

JavaScript

const list = ["apple", "banana", "cherry"];
return (
    <ul>
        {list.map((fruit, index) => (
            <li key={index}>{fruit}</li>
        ))}
    </ul>
);

A
Using index as a key is fine in all cases
B
index should not be used as a key when the list can change dynamically
C
The key should always be a string
D
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?

A
{list.map(item => <Component key={item.id} />)}
B
{list.map(<Component key={item.id} />)}
C
{list.map(Component => <key={item.id} />)}
D
{list.map(<key={item.id}>Component</key>)}

Question 8

What is the output of the following code?

JavaScript

const items = ['Apple', 'Banana', 'Apple'];
return (
    <ul>
        {items.map((item, index) => <li key={index}>{item}</li>)}
    </ul>
);

A
A list with duplicate keys
B
A list with unique keys
C
A list with no keys
D
An error due to duplicate keys

Question 9

What is the key used in this example?

JavaScript

const users = [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}];
return (
    <ul>
        {users.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
);

A
user.name
B
user
C
user.id
D
index

Question 10

Which technique helps optimize large list rendering in React?

A
Using forEach()
B
Avoiding keys
C
List virtualization (e.g., React Window)
D
Randomly generating keys

Tags:

Web Technologies

ReactJS

React Quiz

There are 10 questions to complete.

Take a part in the ongoing discussion