I can't understand why my tests aren't passing for the Build a Markdown Previewer challenge

JavaScript
1

Granted my code isn’t very pretty and doesn’t do anything super special right now (I’ll get to that when I figure out why it’s not passing) but as far as I can tell, all the tests should be passing for the markdown previewer, but only 3 of them pass. Also, why doesn’t any of the marked markup show on newlines even though I’m entering new lines?

class MarkdownApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "# Marked - Markdown Parser\n## How To Use The Demo\n <http://www.github.com>\n `this is code`\n\t`inline code`\n    blockquote\n * list\n ![image](https://www.w3schools.com/w3css/img_lights.jpg)\n __bold__"
    };
    
    this.handleKeyUp = this.handleKeyUp.bind(this);
  }
  
  handleKeyUp(event) {
    this.setState({ value: event.target.value });
  }
  
  render() {
    return (
      <form>
        <label>
          Enter your markdown here:
          <br />
          <textarea onKeyUp={this.handleKeyUp} id='editor' />
          <br />
        </label>
        <label>
          Your markup will be previewed here:
          <p id='preview'>{marked(this.state.value)}</p>
        </label>
      </form>
    );
  }
}

ReactDOM.render(
  <MarkdownApp />,
  document.getElementById('root')
);
2

I looked at the example codepen and realized you’re not just supposed to render the html markup, you’re actually supposed to get it to display like a normal webpage. Instructions were confusing.

3

Yeah, you have

<p id='preview'>{marked(this.state.value)}</p>

which just shows the MD converted to HTML. But you don’t want to display the codes for HTML, you want to interpret them onto the screen. One way to do that is the dangerouslySetInnerHTML property. For example, if I wanted to render a string with a bunch of html in it, I would use:

<div id='preview' dangerouslySetInnerHTML={{__html: stringWithABunchOfHtml }}></div>

That would inject it into the DOM. And I would wrap it in a div, not a p - somethings cannot be a child of a p tag.

2 Likes
4

Thanks! I didn’t know about that property