Frontend Libraries > Markdown Previewer project , built with React, fails the tests for having <h1> tags

Frontend Libraries > Markdown Viewer project , built with react, fails the tests for having h1 tags in the textarea even though they are present. Any help in solving this would be greatly appreciated.

Here are the tests:

5. 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 header (H1 size), a sub header (H2 size), a link, inline code, a code block, a list item, a blockquote, an image, and bolded text

write some markdown representing an <h1> : expected false to be true
6. When my markdown previewer first loads, the default markdown in the #editor field should be rendered as HTML in the #preview element

#preview does not contain the H1 element represented by the markdown in the #editor field 

Here is the code:
index.js

import React from 'react';
import ReactDOM from 'react-dom';
import marked from 'marked';
import './style.css';

/*
* A simple React component
*/
class MarkdownViewer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      markdown: ''
    };
    this.handleChange = this.handleChange.bind(this);
  }

  componentDidMount() {
    this.setState({
      markdown: '<html><body><header><h1>Hello</h1> <h2>hello again</h2></header> <a href=youre awesome>Youre awesome</a><pre>Here is some pre code</pre> <code>Here is some code code</code> <p><ul><li>list hello</li></ul></p> <blockquote>blockquote hello</blockquote> <img src=youre_awesome.gif alt=image youre awesome><p><strong>strong youre awesome</strong></p></body></html>'
    });
    }

  handleChange(e) {
    this.setState({
      markdown: e.target.value
    });
  }

  render() {
    return (
      <div id="mardownViewer">
      <h1 id="title">Markdown Viewer</h1>
      <Editor markdown={this.state.markdown}
      onChange={this.handleChange} />
      <hr/>
      <Preview markdown={this.state.markdown}/>
      </div>
    );
  }
};

class Editor extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
      <textarea id='editor'
      value={this.props.markdown}
      onChange={this.props.onChange}
      type="text"
      />
      </div>
    );
  }
};

class Preview extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const renderer = new marked.Renderer();
    return (
      <div id='preview' dangerouslySetInnerHTML={{__html: marked(this.props.markdown, { renderer: renderer })}} />
    );
  }
};

/*
* Render the above component into the div#app
*/
ReactDOM.render(<MarkdownViewer />, document.getElementById("app"));

index.html

<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Markdown Viewer</title>
  <style>
  </style>
</head>
<body>
  <main>
    <div id="app"></app>
    </main>
    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
  </body>
  </html>

Hey there,

you can have a look at the markdown previewer tests.

Try to debug it on your own and let us know if you need some additional help. :slightly_smiling_face:

There might be bugs in the tests.

Here is the link to the markdown previewer project, that shows <h1> tags are present but the test does not see them:
https://codesandbox.io/s/trusting-field-pkk6q