Build a Markdown Previewer test #4

Tell us what’s happening:

Either the test is faulty or FCC is not telling us all the requirements of the test.

Your code so far

class Previewer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      defaultContent: `# H1

## H2

[Link Text](#)

code:
\`<div></div>\`

\`\`\`
Codeblock:

const abba = (a) => {
function(b){
return b + a;
}
}
\`\`\`

You want a list?
1. Here's a list.
+ A list item.
2. Here's another.
+ another list item
+ and another

> Block Quotes!
> block quotes, man

**Bold Text**

![React Logo](https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg)
`,
      content: null
    };
    this.handleChange = content => {
      this.setState({ content });
    };
  }
  render() {
    marked.setOptions({
      breaks: true
    });
    const renderer = new marked.Renderer();
    renderer.link = (href, title, text) => {
      return `<a target="_blank" href="${href}">${text}</a>`;
    };
    return (
      <div id="App">
        <textArea
          id="editor"
          placeHolder={this.state.content || this.state.defaultContent}
          onChange={e => this.handleChange(e.target.value)}
        >
          {this.state.content || this.state.defaultContent}
        </textArea>
        <div
          id="preview"
          dangerouslySetInnerHTML={{
            __html: marked(this.state.content || this.state.defaultContent, {
              renderer,
              sanitize: false
            })
          }}
        />
      </div>
    );
  }
}
ReactDOM.render(<Previewer />, document.getElementById("root"));

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/73.0.3683.75 Chrome/73.0.3683.75 Safari/537.36.

Link to the challenge:

You won’t believe, but it’s option three: a bug in your code :smirk:

What happens when user clears the textarea (i.e. when state.content is an empty string)?

1 Like

Really help me a lot !!! :smiling_face_with_three_hearts: