Intermediate
Expose only focus and clear
SearchBox forwards its ref to the <input>, so the parent gets the whole DOM node. Change it so the parent's ref gets only an object with two methods: focus() and clear().
clear() empties the input and focuses it. Keep the input's id="q".
Use useImperativeHandle. The parent's Clear button (id="clear") and Peek button (id="peek", which logs what the parent can see) are already written: don't change App.
What Check tests
- The search box starts with
old search - Clear empties the box without an error
- Clear also focuses the box
- The parent can no longer reach the DOM node
- Uses
useImperativeHandle
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.