Checkpoint: Components & Props

Question 1 of 5

• Quotes pass the string “false”, and any non-empty string is truthy. Pass watched={false} instead.
• Boolean props must always be written as a bare attribute.
• && does not work with props.
• The default value in the component overrides the prop.

Question 2 of 5

function MovieItem({ movie }) {
  return <li key={movie.id}>{movie.title}</li>;
}

{movies.map((movie) => <MovieItem movie={movie} />)}

• movie.id is not unique enough; use the index.
• The <ul> around the list needs a key.
• Keys only work on HTML elements, not components.
• The key must be on <MovieItem key={movie.id} … /> in the map, not on the <li> inside the component.

Question 3 of 5

• A buttons prop with an array of label strings, and Dialog creates the buttons and their click handlers.
• title as a prop, the body as children, and a footer prop that takes JSX such as footer={<button onClick={close}>Close</button>}.
• One Dialog component per use, copied and edited each time.
• Pass the whole dialog markup as an HTML string.

Question 4 of 5

• Math.random(), so keys are always unique.
• The index, because the list is short.
• The genre string itself, because it is unique within the list and stable.
• No key, because strings do not need keys.

Question 5 of 5

• const upper = title.toUpperCase(); return <h2>{upper}</h2>;
• props.title = props.title.toUpperCase(); return <h2>{props.title}</h2>;
• const [upper] = useState(title.toUpperCase()); then render upper.
• useEffect(() => setUpper(title.toUpperCase()), [title]); then render upper.