Skip to content
QuiznExam

Lists and Keys in ReactJS Quiz

Test your knowledge of lists and keys in ReactJS, including rendering arrays with map(), assigning unique keys, using stable identifiers, handling list updates, filtering data, and understanding how keys affect React reconciliation.

15
Questions
12 min
Time limit
Medium
Difficulty

No sign-up needed · Last updated:

Save your score

At least 8 characters.

Forgot password?

Related quizzes

All 15 questions and answers Spoilers: this shows the questions and answers. Try the quiz first! Open

  1. 1. Which JavaScript method is commonly used to render a list of elements in ReactJS?

    • A. forEach()
    • B. map()
    • C. reduce()
    • D. join()
    Show answer

    B. map()

    The map() method transforms each item in an array into a JSX element, producing a collection that React can render.

  2. 2. Why does React require keys when rendering elements from a list?

    • A. To help identify elements between renders
    • B. To apply CSS styles automatically
    • C. To convert arrays into strings
    • D. To prevent components from receiving props
    Show answer

    A. To help identify elements between renders

    Keys help React match list items across renders so it can determine which items were added, removed, or reordered.

  3. 3. Which of the following is a valid way to assign a key when rendering a list of users?

    • A. <li id={user.id}>{user.name}</li>
    • B. <li key={index}>{user.name}</li>
    • C. <li key={user.id}>{user.name}</li>
    • D. <li unique={user.id}>{user.name}</li>
    Show answer

    C. <li key={user.id}>{user.name}</li>

    A key should use a stable identifier associated with the item, such as a unique user ID, when one is available.

  4. 4. Where should the key prop generally be placed when rendering list items in React?

    • A. Only on the parent component
    • B. Inside the item's text content
    • C. On the root HTML element of the entire application
    • D. On the outermost element returned for each list item
    Show answer

    D. On the outermost element returned for each list item

    React needs the key on the element directly produced for each item in the mapped list. If a component is returned, the key generally belongs on that component element.

  5. 5. What is a potential problem with using an array index as a key when list items can be reordered or removed?

    • A. React will always delete the entire application
    • B. React may associate component state with the wrong item
    • C. The array becomes immutable
    • D. The map() method stops working
    Show answer

    B. React may associate component state with the wrong item

    When positions change, index-based keys can cause React to match an existing component instance with a different logical item, potentially producing incorrect state or UI behavior.

  6. 6. Which property should generally be preferred for a React list key?

    • A. A stable, unique identifier for each item
    • B. A random number generated during every render
    • C. The current timestamp generated for every item
    • D. The item's position, regardless of list changes
    Show answer

    A. A stable, unique identifier for each item

    Stable unique identifiers allow React to track the same logical items across renders, even when their positions change.

  7. 7. Are React keys passed to a child component as an ordinary prop?

    • A. Yes, every component receives key automatically
    • B. Yes, but only when the key is a string
    • C. No, key is a special React attribute and is not available as props.key
    • D. No, because keys are valid only on HTML elements
    Show answer

    C. No, key is a special React attribute and is not available as props.key

    React uses key internally for reconciliation and does not pass it as a normal prop. Pass the identifier separately if the child component needs it.

  8. 8. What happens if two sibling elements in the same rendered list have the same key?

    • A. React automatically creates unique keys for both
    • B. React sorts the elements alphabetically
    • C. React converts both elements into one
    • D. React may produce a warning and reconciliation behavior may be incorrect
    Show answer

    D. React may produce a warning and reconciliation behavior may be incorrect

    Keys must be unique among siblings. Duplicate keys make it difficult for React to identify elements correctly during updates.

  9. 9. Which expression correctly renders each product name from a products array?

    • A. {products.forEach(product => <li>{product.name}</li>)}
    • B. {products.map(product => <li key={product.id}>{product.name}</li>)}
    • C. {products.join(product => <li>{product.name}</li>)}
    • D. {products.filter(product => <li>{product.name}</li>)}
    Show answer

    B. {products.map(product => <li key={product.id}>{product.name}</li>)}

    The map() method returns a new array of JSX elements, and each element uses the product's stable ID as its key.

  10. 10. Can React render an array of JSX elements returned by map() directly inside a parent element?

    • A. Yes, React can render an array of elements
    • B. No, every array must first be converted to JSON
    • C. Only if the array contains strings
    • D. Only when using class components
    Show answer

    A. Yes, React can render an array of elements

    React supports rendering arrays of elements as children, which makes map() a common pattern for rendering lists.

  11. 11. What is the purpose of a key when an item is removed from a rendered list?

    • A. To prevent the array from changing
    • B. To automatically restore the removed item
    • C. To help React identify which item should be removed
    • D. To convert the removed item into a DOM attribute
    Show answer

    C. To help React identify which item should be removed

    Stable keys help React determine which item disappeared from the list and update the rendered output accordingly.

  12. 12. Which approach is appropriate when rendering a list of components where each item contains several sibling elements?

    • A. Remove all keys from the list
    • B. Assign the same key to every child
    • C. Place a key only on an unrelated parent outside the list
    • D. Use a keyed React Fragment or a wrapper element for each item
    Show answer

    D. Use a keyed React Fragment or a wrapper element for each item

    When an item returns multiple sibling elements, a keyed Fragment using React.Fragment can group them without adding an extra DOM element.

  13. 13. Which statement about generating keys with Math.random() during every render is correct?

    • A. It guarantees that component state is preserved
    • B. It can cause React to treat items as new elements on each render
    • C. It is required for every React list
    • D. It makes rendering lists faster in every situation
    Show answer

    B. It can cause React to treat items as new elements on each render

    Random keys change between renders, so React may recreate components instead of preserving their instances, potentially losing local state and causing unnecessary work.

  14. 14. Which method is commonly used to display only items that satisfy a condition before rendering them with map()?

    • A. filter()
    • B. push()
    • C. reverse()
    • D. splice()
    Show answer

    A. filter()

    The filter() method creates an array containing only items that satisfy a condition. The resulting array can then be rendered using map().

  15. 15. What is the main difference between a React key and an element's id attribute?

    • A. Both are always rendered as HTML attributes with identical behavior
    • B. The id attribute is used only for list reconciliation
    • C. A key helps React with reconciliation, while id is an ordinary attribute that can appear in the DOM
    • D. A key can be used only with numbers, while id can be used only with strings
    Show answer

    C. A key helps React with reconciliation, while id is an ordinary attribute that can appear in the DOM

    React uses key internally to track elements during reconciliation. The id attribute is a regular DOM attribute commonly used for identification, styling, or linking.