I am attempting to display some links using the ReactMarkdown library within a React component, but in order to achieve a specific styling, I need to pass certain props.
The Links component is a styled component that I am using to style the paragraph property within the renderers object of ReactMarkdown. However, to make Links work properly, I must pass the linkColor={linkColor} props.
Code: A snippet of my code where Container is another styled div:
<Container>
{websites.map((website, index) => (
<div key={'website' + index}>
<ReactMarkdown
source={`[${website.websiteName}](${website.externalUrl})`}
unwrapDisallowed={true}
renderers={{ paragraph: Links, link: Linkrender }}
/>
</div>
))}
</Container>
const Links = styled.div`
color: ${(p) => p.linkColor};
::before {
content: ' ';
white-space: pre;
}
::after {
content: ' /';
white-space: pre;
}
`;
Tried: I attempted the following solution, but it didn't work as expected. It resulted in the source of ReactMarkdown being lost and only the style applied to an empty div.
<ReactMarkdown
source={`[${website.websiteName}](${website.externalUrl})`}
unwrapDisallowed={true}
renderers={{ paragraph: ({linkColor}) => (
<Links {...linkColor={linkColor}} />), <<<<<<<<<<<<< tried this
link: Linkrender }}
/>
Is the syntax correct? What could be causing this issue? Could it be because my styled component is a div being applied to a <p>? Additionally, Linkrender is another styled component that is custom-made and is an <a> element that cannot be altered.