Mark Down Previewer Help

1

Here is a link to my project: https://codepen.io/moizhasan/pen/XxmJxe

I can’t get tests 3 or 4 to pass even though it seems to be updating correctly when I try it out.

Thanks in advance.

2

I’m on Firefox on Windows. It doesn’t update for me.

3

A couple of things:

  1. I noticed that you’re using raw JS to set the value of #editor in the componentDidMount() event handler. You should set a default attribute that gets passed in to your MarkdownPreview component and handled in the constructor’s this.state={} statement.
  2. Your event handling suffers from some common mistakes (in React syntax, and in general):
    1. React uses camelCase for event handler attributes onChange, not onchange
    2. Your event handler has to accept the event object as a parameter. You have referenced event, but not declared it within updatePreview.
      1. I managed to get it to live-update with these changes, which I noticed by adding a console.log statement to let me know I had entered the eventhandler function.

Making these changes got it to live update, but the tests still don’t acknowledge it. Did you link to and older version?

4

I also remember that when I got stuck, I check the test bundle (URL in the test failure messages with a :line number). So, if you download that into a code editor like Notepad++, you can read the conditions that caused the error message.

For example: Your specific test error messages (inside the border):
3. #preview is not being updated as I type into #editor (should update on every keyup)
4. preview’s only children should be those rendered by marked.js : expected ‘<h2>Preview</h2><div id=“preview-text”></div>’ to equal ‘’

Tells me that if you fix #4, you might also pass #3.

5

It seems like the issue was having any child elements inside #preview cause the test to fail. Dumb mistake on my part -_-
Renaming preview-text to preview passes 3 and 4.

6

Mark my prior hint as the solution, then.