React Basics — Series 2

Preview — 3 of 10 questions

This code renders correctly, but React will log a warning in some cases and cause subtle bugs in others. What's the issue with using index as the key?

javascript

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo, index) => (
        <li key={index}>{todo.text}</li>
      ))}
    </ul>
  );
}

Aindex is not a valid JSX expression, so this throws a runtime error

BReact ignores the key prop entirely when it's a number, so this has no effect

CIf the list is reordered, filtered, or items are inserted/removed, index-based keys don't track the same item across re-renders — React can reuse the wrong DOM node/state for a shifted item

Dkey is only required for <li> elements — this code is actually correct as-is for any other tag

When itemCount is 0, what actually renders inside the <div>?

javascript

function Cart({ itemCount }) {
  return (
    <div>
      {itemCount && <span className="badge">{itemCount}</span>}
    </div>
  );
}

ANothing — 0 is falsy, so React renders nothing, exactly like the developer intended

BThe <span className="badge"> renders with empty content

CReact throws a PropTypes warning about rendering a number without a <span> wrapper

DThe literal text 0 is rendered on the page, because 0 is a valid, renderable JSX child (unlike false, null, or undefined)

What makes this a controlled input, and what would happen if onChange were removed but value={query} stayed?

javascript

function SearchBox() {
  const [query, setQuery] = useState('');
  return (
    <input
      value={query}
      onChange={(e) => setQuery(e.target.value)}
    />
  );
}

AIt's controlled because React state (query) is the single source of truth for the input's value; without onChange, the input would become read-only — React would block every keystroke since nothing updates query

BIt's controlled because the <input> tag is inside a component; removing onChange would just stop console logging, typing would still work

C"Controlled" refers to using useState anywhere in the file — removing onChange has no effect on typing behavior

DIt's controlled because of the value attribute's name; removing onChange would make React throw a compile-time error

Answer all 10 questions (7 more), see explanations for every answer, and track your score.