Originally I had a Parent Component which had this wrapper component on some DOM elements:
const Card = ({ }) => {
const LinkComponent = ({ children }) =>
to && !onClick ? (
<Link aria-label={`${title} ${t('thumbnail-image')}`} to={to}>
{children}
</Link>
) : (
<a aria-label={`${title} ${t('thumbnail-image')}`} href={href} onClick={onLinkClick}>
{children}
</a>
);
return (
<CardArticle id={id} isListView={isListView} data-testid="card-article">
{showThumbnail && (
<LinkComponent>
<CardImage
id={id}
alt={title}
image={image}
isLazyLoading={isLazyLoading}
isListView={isListView}
/>
</LinkComponent>
)}
<CardInfo>
<TitleWrapper>
<LinkComponent>
<CardTitle data-testid="card-title" tabIndex={0} aria-label={title || t('untitled')}>
{title}
</CardTitle>
</LinkComponent>
</TitleWrapper>
</CardArticle>
);
};
What I want is instead of wrapping these elements with a component, I'd just like to pass a function to the onClick handler of the parent of the children.
const handleOnClick (e) => {
if (to && !onClick) {
return <Link aria-label={`${title} ${t('thumbnail-image')}`} to={to}>
{xxxxxx} // what goes here?
</Link>
} else {
return <a aria-label={`${title} ${t('thumbnail-image')}`} href={href} onClick={onLinkClick}>
{xxxxxx} // what goes here?
</a>
}
}
return (
<CardArticle onClick={handleOnClick}>
</CardArticle/>
I need to make the entire component a link instead of sections like it was!
Any help would be appreciated!
if you can edit CardArticle component you can do it in such way:
// CardArticle file
const CardArticle = ({children, onClick}) => {
return onClick ? onClick(children) : children
}
const Card = ({ }) => {
const handleOnClick = (children) => {
if (to && !onClick) {
return <Link aria-label={`${title} ${t('thumbnail-image')}`} to={to}>
{children} // what goes here?
</Link>
} else {
return <a aria-label={`${title} ${t('thumbnail-image')}`} href={href} onClick={onLinkClick}>
{children} // what goes here?
</a>
}
}
return (
<CardArticle onClick={handleOnClick}>
</CardArticle>
)
}