Focus a field and scroll to a section
Neither job has a React prop. The handlers reach the real nodes through refs and call the browser's own methods.
Put a ref on a JSX element with the ref attribute and React stores the real DOM node in ref.current after the commit, so you can focus it, scroll it into view or measure it; for a whole list of elements, use a callback ref that fills a Map.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Build a chat box: a list in a scrolling container and an input. After each new message is added, scroll the container to the bottom.
Make a CopyField with a read-only input and a Copy button that selects all the text in the input.
Explain it without notes
How do you get a DOM node in React, and when is it available?
When does React set a ref to null?
How do you keep refs to a list of elements whose length changes?
What can you safely do with a DOM ref, and what shouldn't you do?
Preview
Console
Nothing logged yet.Expected console output
focused element: <input#name>
scrolled down before: false
scrolled down after: true