[SOLVED] Markdown Previewer - not passing test 3 and 4

1

Hello fellow Campers,

There must be a stupid mistake in my code, but can’t find a solution to pass test 3 and 4.

Codepen is here

Error is:

Untitled
Untitled993×375 60.4 KB

So it says AssertionError: #preview is not being updated as I type into #editor (should update on every keyup) : expected ‘t’ to equal ‘a’ (content of my textarea was **test** before I launched the tests.

However, when I type raw text / markdown / html in the textarea, everything is rendered correctly in the preview box.

My code :

My code

HTML

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

<div id = "markdownWrapper"></div>

Javascript

const markdownContentOnLoad =
  "# a header (H1 size)\n \
## a sub header (H2 size)\n \
alink.com\n\n \
`inline code`\n\n \
```a code block```\n\n \
* a list item\n \
> a blockquote\n\n \
an image ![Eclipse Logo](https://www.eclipse.org/artwork/images/v2/logo-800x188.png)\n\n \
**and bolded text.**";

class MarkdownWrapper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      rawMarkdown: markdownContentOnLoad,
      resultHtmlFromMarkdown: marked(markdownContentOnLoad)
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({
      rawMardown: event.target.value,
      resultHtmlFromMarkdown: marked(event.target.value)
    });
    console.log(marked(event.target.value));
  }
  render() {
    return (
      <div style={{ textAlign: "center" }}>
        <textarea id="editor" onChange={this.handleChange}>
          {this.state.rawMarkdown}
        </textarea><br />
        <div id="preview" key={Math.random()} dangerouslySetInnerHTML={{ __html: this.state.resultHtmlFromMarkdown }}></div>
      </div>
    );
  }
}

ReactDOM.render(
  <MarkdownWrapper />,
  document.getElementById("markdownWrapper")
);

Thanks for your time :wink:

Edit: actually, I’m passing test 3 depending on the original content in textarea before launching the test, but then it fails on test 4

2

Ok, only optional test 8 and 9 are not passing right now!

So, sorry for asking, I must have been tired when I posted this ask for help => my markdown was DEFINITELY not rendering correctly. Solution that worked for me (I’ve given a look at the “official” solution to find this) => original content on load was the problem, put one backquote ` before and after the markdown, instead of quotes. And don’t forget to escape the other backquotes ` :wink: