I am using React Markdown (https://www.npmjs.com/package/react-markdown) to render markdown content in my NextJS project.
I have created a simple component named "ImageRenderer" and I need to pass an argument (in this case the slug) in addition props, to this component but I do not know how:
My page.js
<ReactMarkdown source={obj.default} escapeHtml={false} renderers={{ "image": ImageRenderer }} />
The component:
export default function ImageRenderer(props) {
const imageSrc = props.src;
const altText = props.alt;
return (
<img
data-loading="lazy"
data-slug={slug}
data-orig-file={imageSrc}
alt={altText}
/>
);
}
Try this solution. Create an anonymous function and return your component from it with the necessary
props