5 hands-on exercises and 5 find-the-bug challenges for the forwardRef, Portals and Lazy Loading lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.
Use forwardRef so the parent can reach the input.
Render the panel into the document body.
A click inside the portal still updates the parent's state.
Focus the child's input from the parent.
Render into a specific node rather than the body.
A ref on your own component needs forwardRef to reach a DOM node.
The ref arrives but is not put on the input.
Ready to write the code?
The editor, the automatic checks and the worked solutions open up with an account.
Open the workspaceThe panel is rendered inline instead of through a portal.
createPortal comes from react-dom, not react.
The close button inside the portal is not wired to the parent.