🔹MCQs of Class 8
Lists and Keys
1.
What
method is commonly used in React to render lists from arrays?
A) filter()
B) map()
C) reduce()
D) forEach()
Answer: B) map()
2.
Why
do we need to provide a key prop when rendering lists in React?
A) To style the list items
B) To uniquely identify elements for efficient updates
C) To add event listeners
D) To render elements in order
Answer: B) To uniquely identify elements
for efficient updates
3.
Which
of the following can be used as a key in React list rendering?
A) Index of the array
B) Unique ID
C) Random number
D) Object itself
Answer: B) Unique ID
4.
What
will happen if keys are not unique in a list rendering?
A) React will throw a compile-time error
B) React may incorrectly update or re-render elements
C) The list will not render at all
D) No effect on rendering
Answer: B) React may incorrectly update or
re-render elements
5.
Which
of these is a valid way to write a map function in React JSX?
A) {items.map(item => <li>{item}</li>)}
B) {items.map(item) { return <li>{item}</li> }}
C) {items.map(<li>{item}</li>)}
D) {items.forEach(item => <li>{item}</li>)}
Answer: A) {items.map(item => <li>{item}</li>)}
6.
In
the code snippet below, what is the key for the list item?
{products.map(product => (
<li key={product.id}>{product.name}</li>
))}
A)
product.name
B) product.id
C) Index of the product
D) product object
Answer: B) product.id
7.
Which
is NOT a good choice for a key in React list?
A) A unique string ID
B) An array index
C) A unique number ID
D) A UUID string
Answer: B) An array index
8. What will this render?
const fruits = ['Apple', 'Banana', 'Cherry'];
return (
<ul>
{fruits.map(fruit => <li key={fruit}>{fruit}</li>)}
</ul>
);
A)
List of fruit names with keys as fruit names
B) List of fruit names with keys as index
C) Empty list
D) Error because keys cannot be strings
Answer: A) List of fruit names with keys as
fruit names
9.
If
you want to render only items with price > 500 from products array, which
method would you use?
A) map()
B) filter()
C) reduce()
D) sort()
Answer: B) filter()
10.
What
does map() return when used on an array?
A) A new array with transformed elements
B) The original array
C) A boolean value
D) Nothing
Answer: A) A new array with transformed
elements
11.
Which
of the following statements about keys is TRUE?
A) Keys must be globally unique
B) Keys must be unique only among siblings
C) Keys are used for styling
D) Keys must be numbers
Answer: B) Keys must be unique only among
siblings
12.
Why
is using array index as a key discouraged?
A) It always causes runtime errors
B) It can cause rendering issues when the list changes
C) It’s not supported in React
D) It slows down the rendering
Answer: B) It can cause rendering issues
when the list changes
13.
How
do you render nested lists in React?
A) Use multiple map() calls inside each other
B) Use a for loop inside JSX
C) Use nested arrays only
D) Use JSON.stringify()
Answer: A) Use multiple map() calls inside
each other
14.
In
this code, what will be displayed when the list is empty?
{products.length === 0 ? <p>No products available</p> : <ul>{products.map(...}</ul>}
A)
An empty list
B) No products available
C) Error
D) Nothing
Answer: B) No products available
15.
Which
hook is commonly used to dynamically update a list based on user input?
A) useState
B) useEffect
C) useContext
D) useReducer
Answer: A) useState
16. What will this render?
const numbers = [1, 2, 3];
return numbers.map(n => <p key={n}>{n
* 2}</p>);
A)
Paragraphs with values 1, 2, 3
B) Paragraphs with values 2, 4, 6
C) A single paragraph
D) Nothing
Answer: B) Paragraphs with values 2, 4, 6
17.
In
React, what is the main purpose of the map() function in rendering?
A) To perform side effects
B) To transform data into UI components
C) To mutate arrays
D) To sort arrays
Answer: B) To transform data into UI
components
18.
How
can you filter a list of objects in React before rendering?
A) Use filter() on the array and then map()
B) Use only map()
C) Use reduce()
D) Use forEach()
Answer: A) Use filter() on the array and
then map()
19.
If
you want to display "No items found" when a filtered list is empty,
where should you put that condition?
A) Inside the map function
B) Before map() call using a conditional operator
C) After map() call
D) Inside a useEffect hook
Answer: B) Before map() call using a
conditional operator
20.
Which
JSX expression correctly uses keys?
A)
{items.map((item) => <div key={item.id}>{item.name}</div>)}
B) {items.map((item, index) => <div
key={index}>{item.name}</div>)}
C) {items.map((item) => <div>{item.name}</div>)}
D) {items.map((item) => <div
key="key">{item.name}</div>)}
Answer: A) {items.map((item) => <div
key={item.id}>{item.name}</div>)}
21.
What
will happen if two list items have the same key?
A) React will merge them
B) React will warn and may cause rendering bugs
C) React will ignore one of them
D) React will crash
Answer: B) React will warn and may cause
rendering bugs
22.
How
can you render a list of JSX elements from an array in React?
A) Using the map() method returning JSX for each element
B) Using a for loop inside JSX
C) Using reduce() to concatenate strings
D) Using JSON.stringify()
Answer: A) Using the map() method returning
JSX for each element
23.
If
a list changes dynamically, what is the importance of keys?
A) They help React identify which items changed, added, or removed
B) They style the list items
C) They trigger re-renders manually
D) They store list data
Answer: A) They help React identify which
items changed, added, or removed
24. Which one is a correct way to render dynamic content from a list of objects?
const users = [{id: 1, name: 'John'}, {id: 2, name: 'Jane'}];
A)
{users.map(user => <div key={user.id}>{user.name}</div>)}
B) {users.forEach(user => <div>{user.name}</div>)}
C) {users.filter(user => user.id).map(user => user.name)}
D) {users.map(user => user)}
Answer: A) {users.map(user => <div
key={user.id}>{user.name}</div>)}
25.
Which
React hook can be used to store the list of items in state?
A) useState
B) useRef
C) useEffect
D) useMemo
Answer: A) useState
26. What is the output of this snippet?
const nums = [1, 2, 3];
return <ul>{nums.map(num =>
<li key={num}>{num}</li>)}</ul>;
A)
A list of numbers 1, 2, 3 with keys 1, 2, 3
B) An empty list
C) Error due to keys
D) List of strings
Answer: A) A list of numbers 1, 2, 3 with
keys 1, 2, 3
27.
What
happens if you forget to add a key in a list?
A) React automatically assigns keys
B) React shows a warning in console
C) The list won’t render
D) The app crashes
Answer: B) React shows a warning in console
28.
Why
should you avoid using random numbers as keys?
A) Keys must be predictable and stable between renders
B) Random numbers cause syntax errors
C) React does not accept numbers as keys
D) Random numbers are not unique
Answer: A) Keys must be predictable and
stable between renders
29.
Which
of the following is NOT true about the map() method?
A) It returns a new array
B) It mutates the original array
C) It takes a callback function
D) It is used for transforming arrays
Answer: B) It mutates the original array
30.
To
render a list of products where each product has a name and price, you should:
A) Use map() to render both properties inside JSX
B) Use forEach() to render products
C) Use reduce() to concatenate names and prices
D) Use filter()
Answer: A) Use map() to render both
properties inside JSX
31.
How
do you add a click event handler to a list item rendered by map()?
A) Add onClick inside the JSX element in the map function
B) Add onClick to the array
C) Add an event listener outside of JSX
D) Use useEffect
Answer: A) Add onClick inside the JSX
element in the map function
32.
What
is a common mistake when rendering lists dynamically in React?
A) Using inline styles
B) Forgetting the key prop
C) Using className instead of class
D) Using map instead of filter
Answer: B) Forgetting the key prop
33.
What
type of value should be avoided as a key?
A) Unique IDs
B) Array indexes if the list changes
C) Strings that are unique
D) UUIDs
Answer: B) Array indexes if the list
changes
34.
Which
array method should be used to filter products with price greater than 100?
A)
products.filter(product => product.price > 100)
B) products.map(product => product.price > 100)
C) products.reduce(product => product.price > 100)
D) products.forEach(product => product.price > 100)
Answer: A) products.filter(product =>
product.price > 100)
35.
What
will the following code snippet output?
const data = [{id: 1, name: 'A'}, {id: 2, name: 'B'}];
return data.map(item => <p key={item.id}>{item.name}</p>);
A)
Paragraphs with 'A' and 'B' text
B) Array of strings
C) Error due to missing keys
D) Nothing
Answer: A) Paragraphs with 'A' and 'B' text
36.
What
does the key help React do during rendering?
A) Find which items changed, added, or removed
B) Assign styles
C) Bind events
D) Create new arrays
Answer: A) Find which items changed, added,
or removed
37.
How
can you dynamically add items to a list in React?
A) Update state array using setState with new item appended
B) Push directly to the state array
C) Use map() only
D) Use useEffect only
Answer: A) Update state array using
setState with new item appended
38.
What
will happen if the key prop is missing or duplicated in a list?
A) No rendering happens
B) React may behave unpredictably and shows a warning
C) It’s fine; no effect
D) React throws an error and stops rendering
Answer: B) React may behave unpredictably
and shows a warning
39.
Which
is a good practice when rendering list items?
A) Always provide a unique key
B) Use array index as a key always
C) Avoid keys if possible
D) Use random numbers as keys
Answer: A) Always provide a unique key
40.
How
do you access the index of an item inside map()?
A) By using second argument in map callback: .map((item, index) => ...)
B) Using item.index
C) Using this.index
D) By looping separately
Answer: A) By using second argument in map
callback: .map((item, index) => ...)
41.
Which
method is used to remove an item from an array before rendering?
A) filter()
B) map()
C) reduce()
D) forEach()
Answer: A) filter()
42.
Why
do we use conditional rendering with lists?
A) To show messages like 'No items found' if the list is empty
B) To style the list
C) To add event handlers
D) To modify the array
Answer: A) To show messages like 'No items
found' if the list is empty
43.
Can
you use expressions inside map() when rendering JSX?
A) Yes, you can return any JSX element
B) No, only strings allowed
C) Only numbers allowed
D) Only HTML tags allowed
Answer: A) Yes, you can return any JSX
element
44.
What
is the correct way to render a list of components?
A)
<Component key={id} /> inside map()
B) <Component /> outside map()
C) <Component key="key" /> for all
D) Using forEach()
Answer: A) <Component key={id} />
inside map()
45.
Which
of these is NOT a React rule about keys?
A) Keys should be unique among siblings
B) Keys should not change between renders
C) Keys must be assigned globally unique values
D) Keys help React optimize rendering
Answer: C) Keys must be assigned globally
unique values
46.
Which
is true about dynamic rendering of lists in React?
A) Use state to hold list data and map to render
B) Use static HTML only
C) Use for loop to render JSX directly
D) Use strings inside JSX only
Answer: A) Use state to hold list data and
map to render
47.
How
do you add styles to list items rendered via map()?
A) Use style or className inside JSX elements in map
B) Use CSS outside JSX only
C) Use inline styles only in parent element
D) Styles cannot be applied dynamically
Answer: A) Use style or className inside
JSX elements in map
48.
What
happens when you render a list with missing or duplicate keys?
A) React warns but still renders list
B) React crashes
C) List does not render
D) Browser error
Answer: A) React warns but still renders
list
49.
If
you want to update one item in a list stored in React state, what is a
recommended approach?
A) Create a new array with updated item and set state
B) Mutate the original state array
C) Use forEach to update the array directly
D) Use map() without setState
Answer: A) Create a new array with updated
item and set state
50.
What
is the purpose of .map() in React rendering?
A) To iterate over arrays and return JSX elements for rendering
B) To mutate arrays
C) To sort arrays
D) To filter arrays
Answer: A) To iterate over arrays and
return JSX elements for rendering
