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>