Test what you learned.

8 questions on Components & Props. Pass 70% to clear the chapter.

← Review chapter lessons

Quiz

Components & Props — Chapter Quiz

Eight questions on props, children, composition, and keys.

0/ 8

Question 1
1
A child component can mutate its props.
TTrueFFalse
Props are read-only. Mutating them creates surprising bugs. Use state for values the child controls.
Question 2
2
How do you pass a number as a prop?
A<Comp value="5" />B<Comp value={5} />C<Comp value=5 />DAll of the above
Non-string values need { }. "5" would be the string "5", not the number.
Question 3
3
What does the children prop hold?
AAn array of nested components' propsBWhatever JSX was between the component's opening and closing tagsCThe component's DOM childrenDNothing — it's a placeholder
children is the JSX you write between <Comp> and </Comp>. Render it inside the component to "fill the slot".
Question 4
4
What does this render?
```
function Box({ children }) {
  return <div className="box">{children}</div>;
}

<Box>Hi</Box>
```
A<div class="box">Hi</div>B<div class="box" />CNothingDTypeError
The string "Hi" is passed as children and rendered inside the <div>.
Question 5
5
Which key choice is best for a list of { id, name } items?
AThe array indexBitem.idCMath.random()Ditem.name
A stable id from your data is the canonical answer. Index is OK only when the list never reorders. Math.random() defeats the purpose. name works only if names are unique.
Question 6
6
<div onClick={handleClick()}> calls handleClick on every render.
TTrueFFalse
handleClick() (with parens) invokes the function and passes its result as the handler. Drop the parens or wrap in an arrow.
Question 7
7
What does function Btn({ kind = "primary", ...rest }) { ... } do?
ADestructures kind with default "primary" and collects all other props into restBDefines a class componentCSpreads props before they arriveDSets default props for every prop
= "primary" provides a default; ...rest collects any other props you didn't name.
Question 8
8
To forward arbitrary props to an inner element, use <button {._______}> (rest was destructured).
{...rest} spreads everything in rest onto the element.