import React, { forwardRef } from "react";

const Stack = forwardRef((props, ref) => {
return (
<div {...props} ref={ref}>
{props.children}

);
});

export default Stack;

In React, when a ref is passed to a component, that component must forward the ref to a DOM element using React.forwardRef. If the Stack component does not implement forwardRef, the ref will not be attached to the underlying DOM element, resulting in ref.current being null or undefined.

import React, { useRef, useEffect } from 'react';

export function Example(props) {
const ref = useRef(null);

useEffect(() => {
console.log(ref.current);
}, []);

return <Stack {...props} ref={ref}>contents;
}

Primer First Responder, we'd love your help fixing this ref!

@iansan5653 I believe the types might be too loose for Stack which might be part of the problem here 🤔 The component does not currently support ref but the types seem to be allowing basically anything to be passed in so it has the appearance of being supported.

We've been trying to find a good way to do polymorphic as types and this seems to be a limitation with the approach we have 😅 Let me see if we can address that separately.

For Stack specifically, would it still be desirable for it to accept a ref? We can treat this as an enhancement then and get it added.

For Stack specifically, would it still be desirable for it to accept a ref? We can treat this as an enhancement then and get it added.

Yeah, I think this would be expected for such a low-level component. Since it's practically a lightweight div wrapper, it's definitely useful to be able to take a ref.

One simple example is that Stack could be used as a toolbar with useFocusZone if it forwarded a ref.

To resolve the issue of the ref not being bound to the underlying element in the Stack component, ensure that Stack uses React.forwardRef. Here's how you can implement it:

``javascript
import React, { forwardRef } from "react";

const Stack = forwardRef((props, ref) => {
return
{props.children}
;
});

export default Stack;
`

This allows the ref passed to Stack to be forwarded to the div element, enabling proper access to ref.current`.