How to create a portal to a child component? - reactjs

Question

I would like to create a portal to insert a content in a child component but I can't make it work. I tried to use a callback ref as shown on this answer but it doesn't work (the content of the portal is not displayed). Here is a simplified example of what I have:
const Parent = () => (
<Child
ref={(el) => {
if (!el) return;
const selector = el.querySelector(".title");
createPortal("My title", selector);
}}
/>
);
const Child = forwardRef((_, ref) => (
<div ref={ref}>
<h2 className="title"></h2>
<p>Test content</p>
</div>
));
I also tried with useRef(), but to no avail.
const Parent = () => {
const childRef = useRef();
const renderTitle = () => {
const selector = childRef.current.querySelector(".title");
return createPortal("My title", selector);
}
return (
<Child ref={childRef}>
{childRef.current && renderTitle()}
</Child>
);
}
Is there a way to do this?
I know the obvious solution is to pass the title as a prop but the title prop of my real <Child /> component displays a simple text and I need a different display. I don't want to change <Child /> as it can be used without <Parent/> and I use the latter to deal with other extra functionalities, which include building a custom title dynamically.
Here is a CodeSandbox, if you want to try.

Answer 1

Portals are not for these purposes. You can just pass Component to the child component. Or use the function to generate that name.
const Parent = () => (
<Child
titleComponent={<TitleComponent />}
/>
);
const Child = ((titleComponent) => {
return (
<div ref={ref}>
<h2 className="title">{titleComponent}</h2>
<p>Test content</p>
</div>
)
});

Answer 2

I managed to make it work by storing the selector in a state using useEffect:
const Parent = () => {
const childRef = useRef();
const [titleContainer, setTitleContainer] = useState(null);
useEffect(() => {
const titleContainerSelector = childRef.current.querySelector(".title");
setTitleContainer(titleContainerSelector);
}, []);
return (
<Child ref={childRef}>
{titleContainer && createPortal("My title", titleContainer)}
</Child>
);
}
It doesn't work when I try this on CodeSandbox but it works on my real components. I'm not sure why. For the record, here is the answer that gave me the solution.