How to use React Ref with Styled Component - reactjs

Question

I am running React 16.8.6 and Styled Components 4.3.2 currently and am hitting an issue trying to use React.forwardRef.
In Comments.js
import CommentItem from './CommentItem';
class Comments extends Component {
constructor(props) {
super(props);
this.items = [];
}
componentDidMount() {
console.log(this.items);
}
render() {
const { comments } = this.props;
return (
<div>
{comments.length > 0 &&
comments.map((comment, i) => {
this.items[i] = React.createRef();
return (
<CommentItem
ref={this.items[i]}
key={comment.id}
comment={comment}
/>
);
})}
</div>
);
}
}
In CommentItem.js
import styled from "styled-components";
import { Media } from "react-bulma-components";
const CommentMediaWrapper = styled(Media)`
position: relative;
`;
const CommentItem = React.forwardRef(
({ comment }, ref) => {
return (
<CommentMediaWrapper ref={ref}>
<div>...</div>
</CommentMediaWrapper>
);
}
);
export default CommentItem;
In Comments.js will console an array [{ current: null },...]
I don't know how to pass ref in to CommentMediaWrapper. I don't want add new element outer or inner CommentMediaWrapper. Thank for your help.

Answer 1

I think the issue here is more to do with the library element Media from react-bulma-components that you are wrapping. This component exposes a prop named domRef that can be used to pass the DOM reference to the HTML element underneath the wrappers.
const CommentItem = React.forwardRef(
({ comment }, ref) => {
return (
<CommentMediaWrapper domRef={ref}>
<div>...</div>
</CommentMediaWrapper>
);
}
);
Github Reference