# Mark Down Previewer Help

**URL:** <https://forum.freecodecamp.org/t/mark-down-previewer-help/234863>\
**Category:** General\
**Created:** [October 19, 2018, 8:43pm UTC](https://forum.freecodecamp.org/t/mark-down-previewer-help/234863 "2018-10-19T20:43:19Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![MHasan93](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/mhasan93/32/100465_2.png) [@MHasan93](https://forum.freecodecamp.org/u/MHasan93)\
**Post date:** [October 19, 2018, 8:43pm UTC](https://forum.freecodecamp.org/t/mark-down-previewer-help/234863/1 "2018-10-19T20:43:19Z")

</div>

Here is a link to my project: [https://codepen.io/moizhasan/pen/XxmJxe](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.

---

<div class="post-metadata">

**Author:** ![vipatron](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/vipatron/32/81984_2.png) [@vipatron](https://forum.freecodecamp.org/u/vipatron)\
**Post date:** [October 19, 2018, 8:50pm UTC](https://forum.freecodecamp.org/t/mark-down-previewer-help/234863/2 "2018-10-19T20:50:33Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![vipatron](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/vipatron/32/81984_2.png) [@vipatron](https://forum.freecodecamp.org/u/vipatron)\
**Post date:** [October 19, 2018, 9:05pm UTC](https://forum.freecodecamp.org/t/mark-down-previewer-help/234863/3 "2018-10-19T21:05:21Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![vipatron](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/vipatron/32/81984_2.png) [@vipatron](https://forum.freecodecamp.org/u/vipatron)\
**Post date:** [October 20, 2018, 12:13am UTC](https://forum.freecodecamp.org/t/mark-down-previewer-help/234863/4 "2018-10-20T00:13:21Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![MHasan93](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/mhasan93/32/100465_2.png) [@MHasan93](https://forum.freecodecamp.org/u/MHasan93)\
**Post date:** [October 21, 2018, 1:04am UTC](https://forum.freecodecamp.org/t/mark-down-previewer-help/234863/5 "2018-10-21T01:04:44Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![vipatron](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/vipatron/32/81984_2.png) [@vipatron](https://forum.freecodecamp.org/u/vipatron)\
**Post date:** [October 21, 2018, 1:39pm UTC](https://forum.freecodecamp.org/t/mark-down-previewer-help/234863/6 "2018-10-21T13:39:28Z")

</div>

Mark my prior hint as the solution, then.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 17, 2021, 8:09pm UTC](https://forum.freecodecamp.org/t/mark-down-previewer-help/234863/7 "2021-01-17T20:09:28Z")

</div>

Closed on January 17, 2021, 8:09pm UTC