Front End Development Libraries Projects - Build a Markdown Previewer

So I finished the Markdown Previewer Challenge locally and it’s running beautifully.
Translating that to codepen is causing problems.
First of all I somehow managed to make all the necessary imports (React, ReactDOM, marked), which was a piece of work on its own.
When I run the tests now, they fail on Test 4, interactivity.
And codepen’s compiler tells me that my changeHandler’s event.target is null.

I’m out of ideas and need help

Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/111.0

Challenge: Front End Development Libraries Projects - Build a Markdown Previewer

Link to the challenge:

I might be missing it, but I dont see the markdown library (

https://cdnjs.com/libraries/marked

) loaded. Am i wrong?

1 Like

OOps I was wrong. I see it in the head now. Hmmm… looking through the code

1 Like

Dear Lance, first off I wanna thank you for helping me and looking at the code!
:slight_smile: :pray:

So yes marked is imported a bit complicatedly through html script binding, but that seemed to be the only way that worked. I had quite some trouble with importing all necessary libraries in codepen.

I reviewed the code today, and rewrote it a bit. The parsing happened in App’s render method. Now I moved the parsing to the state, which maybe makes more sense semantically in React. Code still works locally nicely.
codepen however throws a new error instead of “event target is null”:

// [object Error]
{}

Then I added a testarea on the bottom of the code to see if marked does it’s job. And it does. So still no real progress here.

I think codepen might struggle with using event in changeHandlers? Because the newest react version tells me locally that event is deprecated. I did a bit of googling to see how one could replace event. After all event.target.value stores what you need to change states and so on. That will be my next try then, but I’m still a bit hopeless.

You were right about the library.

This one did work:
import marked from “https://cdn.skypack.dev/marked@3.0.0”;

Thanks!

1 Like

Glad it worked for you!

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.