Setting content of <ReactMarkdown> element

[chill31]

How would I set the content of a element?
I have a function which triggers through the onClick={()} of a button. But when I set the id="" of the <ReactMarkdown> element and tried to el.textContent = myContent; it showed el is null, meaning there is no such element as el or the element I tried to get. (<ReactMarkdown> element)

[ChristianMurphy]

Welcome @chill31!
Could you expand on your question a bit? (see the recommendations in https://github.com/remarkjs/.github/blob/main/support.md)
In particular focus on:

• Why you need an event listener on the button
• Where the button is coming from? (from inside the markdown? if so how?)
• Why are you calling el.textContent? Along with when you are calling it, when you are calling it, and what you are targeting.

A recommendation would be to create a sandbox with an example of what you are trying, along with answering the questions above.
Either https://codesandbox.io/s/github/remarkjs/.github/tree/main/sandbox-templates/react-markdown-with-create-react-app or https://stackblitz.com/github/remarkjs/.github/tree/main/sandbox-templates/react-markdown-with-create-react-app can be used as a starter for a sandbox.

---

Without the above answer, I can just read between the lines of what you may want.
It sounds like you have a custom component you want to put on the page, and that custom (button) component needs to trigger an action elsewhere in your application?
If so you may want to consider either:

1. using https://github.com/remarkjs/remark-directive to add the button to the page (How to integrate remark-directive into react-markdown react-markdown#585 gives some additional tips on integrating), then use the components prop of react-markdown to add your button element with the event listener(s) already attached.
2. or, use MDX (https://mdxjs.com/) which adds JSX support into Markdown, allowing the button element to be imported/added directly.

[chill31]

No actually I got it fixed.
It was me trying to change the content of a <ReactMarkdown> component when it was finished rendering (don't know how to explain).
You see, I added a id attribute to the component and tried to change the content of the element. At that time I didn't know that the component actually didn't keep the attributes and broke down to several HTML elements when React finished rendering it.
I have now fixed it using useState().

Closing this "issue" now.

[ChristianMurphy]

Okay,
As a general React note, I'd highly recommend avoiding modifying React managed content using manual DOM selectors.
It can cause conflicts, overrides, and unexpected renders.

If you need to modify something inside the content React manages, use a component (potentially using Context or another state manager to cross multiple layers), to allow any updates to be managed by React, avoiding the above potential issues with direct DOM manipulation.

The way to do that in content within react-markdown is with the components prop and using directives.

[chill31]

Sure, I'll keep it in mind for later when I create another react project