Use forwardRef so the parent can reach the input.
Acceptance criteria
- 1.#value should show Ada.
React Tutorial · Data and Errors
These 10 tasks go with the forwardRef, Portals and Lazy Loading chapter. 5 of them ask you to build something small from scratch; 5 give you code that is already broken and ask you to work out why. Set aside about 90 minutes for the whole set, though you can do them in any order.
Nothing here is marked by a person. When you press Submit, the editor checks your code against the points listed under each task and tells you straight away what passed and what didn't (you need a free account to submit). If you get stuck, there are hints, and a worked solution once you've had a go. The first 2 tasks are free; the rest are part of the practice plan.
If it's been a while since you read the chapter, here is how it starts: “Three escape hatches for problems the normal tree cannot solve: reaching a child's DOM node, rendering outside your parent, and not shipping code until it is needed.” .
1.Forward a ref to a child inputexercise · medium · 10 min
Use forwardRef so the parent can reach the input.
Passes when: #value should show Ada.
2.Render through a portalexercise · medium · 10 min · practice plan
Render the panel into the document body.
Passes when: body > .portal should show in a portal.
3.A portal keeps its React parentexercise · hard · 10 min · practice plan
A click inside the portal still updates the parent's state.
Passes when: #value should show closed.
4.Focus through a forwarded refexercise · hard · 10 min · practice plan
Focus the child's input from the parent.
Passes when: #value should show focused.
5.Choose a portal targetexercise · hard · 10 min · practice plan
Render into a specific node rather than the body.
Passes when: #target should show targeted.
6.Fix the ref that stops at the componentbug fix · medium · 8 min
A ref on your own component needs forwardRef to reach a DOM node.
Passes when: Reading should show Ada.
7.Fix the forwarded ref never attachedbug fix · medium · 8 min · practice plan
The ref arrives but is not put on the input.
Passes when: Reading should show Ada.
8.Fix the portal that never leavesbug fix · hard · 8 min · practice plan
The panel is rendered inline instead of through a portal.
Passes when: The panel should be a direct child of body.
9.Fix createPortal called on Reactbug fix · medium · 8 min · practice plan
createPortal comes from react-dom, not react.
Passes when: The panel should be a direct child of body.
10.Fix the portal handler that does nothingbug fix · hard · 8 min · practice plan
The close button inside the portal is not wired to the parent.
Passes when: Clicking close should show closed.
Between them these tasks cover forwardRef, createPortal and Escape hatches.
Looking for a different chapter? See every practice set, or switch to the interview theory questions.