CODEWITHSUNDEEP
tailwind-cssheadless-ui
octavemirbeau
octavemirbeau

Reputation: 507

Headless UI Transition.child errors to "Did you forget to passthrough the `ref` to the actual DOM node"

I'm building a sidebar with the Transition and Dialog Headless UI components.

Transition docs

When I break out the code that's passed between <Transition.Child> to it's own component. I get this error:

Unhandled Runtime Error
Error: Did you forget to passthrough the `ref` to the actual DOM node?

Call Stack
eval
node_modules/@headlessui/react/dist/components/transitions/transition.js (1:3632)

Failing code:

<Transition.Child as={Fragment}>
    <Cart
      cancelButtonReference={cancelButtonReference}
      setCartOpen={setCartOpen}
      checkoutUrl={checkoutUrl}
      removeCartItem={removeCartItem}
      clearCart={clearCart}
      cartLoading={cartLoading}
      incrementCartItem={incrementCartItem}
      decrementCartItem={decrementCartItem}
      cartTotal={cartTotal}
      cart={cart}
    />
</Transition.Child>

Working code:

<Transition.Child as={Fragment}>
   <div>
     ...
   </div>
</Transition.Child>

I understand the error I believe, which is that when I break out the code to it's own component Transition.Child wants me to pass a ref so that React knows that it should render a component and not a fragment.

If I remove as={Fragment}, which makes the Transition default to a div the error goes away, but then I get an unneeded div..

What ref do I need to pass? This is what I don't get.

Upvotes: 12

Views: 10720

Answers (2)

Ashutosh Randive
Ashutosh Randive

Reputation: 31

If anyone is getting this error after migrating to or installing version 2, just make sure you have added as prop as any element (for eg. div)

If you are using any of these components without the as prop, you'll need to add the as prop and render the component with the element you need:

 - <Transition ...>
 + <Transition as="div" ...>

Source: https://github.com/tailwindlabs/headlessui/releases/tag/%40headlessui%2Freact%40v2.0.0#user-content-upgrading-from-v1

Upvotes: 3

TetsuBo
TetsuBo

Reputation: 86

You don't need to pass a ref, but the component needs to accept one and set it on the actual element. The div element will accept the ref, which is why that method works.

Try creating the Cart component using React.forwardRef and set the ref on the div.

const Cart = React.forwardRef((props, forwardedRef) => {
  return (
    <div ref={forwardedRef}>
    ...
    </div>
  )
})

Upvotes: 5

Related Questions