Refs to a list: a callback ref and a Map
One ref holds a Map of every item's node. The callback ref adds a node when its <li> is attached, and its cleanup removes it when the <li> is removed, so after Papaya goes the Map has five nodes.
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
scrolled to Mango - nodes in the Map: 6
scrolled to Apple - nodes in the Map: 5