9

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.

octavemirbeau
  • 481
  • 6
  • 19

1 Answers1

4

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>
  )
})
TetsuBo
  • 76
  • 3