_Photo by Tim Carey on _Unsplash

Self note while learning Downshift by Kent C. Dodds.

Downshift requires you to have div as the root element.

https://gist.github.com/dance2die/4f05ccbc6475189a3bc5468e586dd491

When Downshift's child is not a div (to extract the functionality into a different component) then getRootProps should be called.

https://gist.github.com/dance2die/22913120840120043c2e13bad5b8c4f0

And make sure to set the inner component's root element ref to the refKey assigned in getRootProps.

https://gist.github.com/dance2die/3226f4197ef59f8ed4a57c0fc3dbf28b

CodeSandbox 🐛?

For some reason, CodeSandbox shows the following error message.

downshift: You must apply the ref prop "innerRef" from getRootProps onto your root element.

says CodeSandbox

But when deployed on Netlify, no error message occurs as shown below.

No getRootProps error message

Resources

SandBox - https://codesandbox.io/s/r4nlpx3j5o

Examples on Downshift repository

• onBlur-tests.js
• onChange-tests.js