Issue with marked library with React when using Babel

Question

I have met issues using marked library in my React app.

The app has been created by adding Babel to HTML/CSS/JS environment and using other libraries like Bootstrap.

It seems that marked parse the text that I put in my box but then gives a gibberish HTML result without applying the design.

I just do not get why the result looks like that and the delay.

function App() {

    const [markdownText, setMarkdownText] = React.useState("When my markdown previewer first loads, the default text in the #editor field should contain valid markdown that represents at least one of each of the following elements: a heading element (H1 size), a sub heading element (H2 size), a link, inline code, a code block, a list item, a blockquote, an image, and bolded text.")
    const [markdowned, setMarkdowned] = React.useState("")

    const handleChange = (e) => {
        setMarkdownText(e.target.value)
        textToMarkdown()
    }

    const textToMarkdown = () => {
        console.log('here')
        setMarkdowned(marked.parse(markdownText));
        return dangerouslySetInnerHTML={ __html: markdowned };
    }

    return (
        
        <div className="row">
            <h1 className="text-center m-4">Convert your markdown</h1>
            <div className="col-6 border bg-danger">
                <h5 className="text-center">
                    Markdown:
                </h5>
                <textarea 
                onChange={handleChange} 
                value={markdownText} 
                id="editor"
                className="border-danger container-fluid box"/>
            </div>
            <div 
            className="col-6 border bg-warning">
                <h5 className="text-center">
                    HTML:
                </h5>
                <div id="preview" 
                className="border border-info rounded p-1 container-fluid box bg-light">
                    {markdowned}
                </div>
            </div>
        </div>
    )
}

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<App />);

All other sources I have found to try to fix this issue are using the regular React env with an extension of components.

Am I missing something? What do I do wrong?

Thanks in advance for your help.

Link to the project on codepen

Link to the repo on Github

Answer 1

Call textToMarkdown inside a useEffect (having markdownText as a dependency) instead of handleChange. Below are the changes to be made

const handleChange = (e) => {
    setMarkdownText(e.target.value)
    // textToMarkdown(text);
}

React.useEffect(() => {
  textToMarkdown();
}, [markdownText]) // execute textToMarkdown(); whenever there is a change to markdownText