Lists and Keys in React

Last Updated :
Discuss
Comments

Question 1

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

  • On <TodoItem> inside the map()

  • On the <ul> element

  • On <li> inside <TodoItem>

  • On the parent component

Discuss it

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

Discuss it

Question 3

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

  • forEach()

  • map()

  • filter()

  • reduce()

Discuss it

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>

Discuss it

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

Discuss it

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>
);


  • 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

Discuss it

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>)}

Discuss it

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 list with duplicate keys

  • A list with unique keys

  • A list with no keys

  • An error due to duplicate keys

Discuss it

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>
);

  • user.name

  • user

  • user.id

  • index

Discuss it

Question 10

Which technique helps optimize large list rendering in React?

  • Using forEach()

  • Avoiding keys

  • List virtualization (e.g., React Window)

  • Randomly generating keys

Discuss it

There are 10 questions to complete.

Take a part in the ongoing discussion