react createRef keeps returning null - reactjs

Question

I have a ref:
const ref = React.createRef();
I pass it like so:
<WinnerPopup winner={turn ? 'cross' : 'circle'} ref={ref}></WinnerPopup>
This is the component:
const WinnerPopup = React.forwardRef((props, ref) => (
<Popup
trigger={<button ref={ref} className="button"></button>}
modal
nested
>
{close => (
<div className="modal">
<button className="close" onClick={close}>
×
</button>
<div className="header"> We have a winner! </div>
<div className="content">
{`Winner is ${props.winner}`}
</div>
</div>
)}
</Popup>
));
And I get the error:
TypeError: Cannot read property 'click' of null
This is such a simple use case and almost exactly the same thing as the document so I cannot figure out why I can't access the button.

Answer 1

I think you normally use forwardRef when you want to pass along the ref to the outer most component of what you are wrapping with forwardRef... ie. you create a that is a wrapper around so you forward the ref onto the ... in this case you are passing it to the button you are passing into a prop (trigger) of your outer most component... maybe you want to just pass the reference in a custom prop, like "triggerButtonRef"... also, what purpose do you need the ref on that button?
You might try and pass the ref as a custom prop, instead of trying to use forwardRef, like:
<WinnerPopup winner={turn ? 'cross' : 'circle'} triggerRef={ref} />
const WinnerPopup = ({ triggerRef, winner }) => (
<Popup
trigger={<button ref={triggerRef} className="button"></button>}
modal
nested
>
{close => (
<div className="modal">
<button className="close" onClick={close}>
×
</button>
<div className="header"> We have a winner! </div>
<div className="content">
{`Winner is ${winner}`}
</div>
</div>
)}
</Popup>
);
Depending on how <WinnerPopup /> works and/or if that is also your own custom component, AND you want to be able to control if it's open from the parent or another component, I think a better solution might be to store a state variable to control whether or not the popup is open, for instance:
const ParentComponent = () => {
const [open, setOpen] = useState(false);
const onClick = () => {
setOpen(!open)
}
return (
<>
<SomeOtherButton onClick={onClick} />
<WinnerPopup winner={turn ? 'cross' : 'circle'} isOpen={open} />
</>
)
}
const WinnerPopup = ({ isOpen, winner }) => (
<Popup
trigger={<button className="button"></button>}
modal
nested
open={isOpen}
>
{close => (
<div className="modal">
<button className="close" onClick={close}>
×
</button>
<div className="header"> We have a winner! </div>
<div className="content">
{`Winner is ${winner}`}
</div>
</div>
)}
</Popup>
);