Intermediate
Let the form reach the input inside your component
The TextField component renders a label and an <input>. The form passes it a ref so Fix the email (id="fix") can focus the email input (id="email"), but TextField ignores the ref, so clicking crashes.
Change only TextField: in React 19 style, read ref from its props and attach it to the <input>.
The other props (id, label, defaultValue) must still work.
What Check tests
- Both fields still show their values
- Fix the email focuses the email input
- Clicking doesn't cause an error
- The ref goes to the input, not the label
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.