Markdown Preview

1

Hi, there. I finished Markdown preview which is one of the projects of Frontend Libraries. However, I am not passing the last tests that check for default markdown text appearance on DOM load. Can anybody help me out? I thought maybe if I use useEffect hook, I would pass the tests but I did not. Here is the jsx code:

const { render } = ReactDOM;
marked.setOptions({breaks: true});
const { parse } = marked;

const text = `# This is an H1
## This is an H2

[This is a link](https://example.com)

Here is some inline \`code\`
- This is a list item

> This is a blockquote

![Image alt text](https://example.com/image.jpg)

**This text is bold**`;

function Editor() {
    const [ editor, setEditor ] = useState("");
    const [ markdown, setMarkdown ] = useState(parse(editor));
    const changeEditor = (event) => {
        const new_value = event.target.value;
        setEditor(new_value);
        setMarkdown(parse(new_value));
    }
    useEffect(() => {
        setEditor(text);
        setMarkdown(text);
    },[]); 
    return (
        <><section id="editor-section">
            <h2 class="heading">Editor</h2>
            <textarea value={editor} id="editor" onChange={changeEditor}></textarea>
        </section>
        <section id="markdown-section">
            <h2 class="heading">Preview</h2>
            <div id="preview" dangerouslySetInnerHTML={{__html: markdown }}></div>
        </section>
        </>
    );
}
render(< Editor />, document.querySelector("#root"));
2

Your setMarkdown inside the useEffect is missing parse. But there is no point in having the useEffect when you can set the initial state of the two useState

Your initial markdown is missing a code block using three backticks, and the code should be on a new line to force the pre element to get added. You can look at the initial markdown in the example project.

3

yeah, thanks a lot. The main problem was I thought I needed to use any one of the markdown content types rather than each one.