Tell us what’s happening:
I’ve tried to build the React Markdown app ans solving the challenges to pass the assignment, without success. I link the codepen project, so that you can have a look at it.
In practice, I can’t seem to pass the challenges with importing marked.
Can you guide me to a solution for this issue?
I asked ChatGPT for some help, but even it (is it an it?) cannot come up with a satisfying solution for the issue and keeps apologising…
Your code so far
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/114.0
Challenge: Front End Development Libraries Projects - Build a Markdown Previewer
Did it tell you to open the browser console and read the error message? Because that should really be the first step (that was rhetorical).
Fix the imports
import React from "https://esm.sh/react@17.0.1";
import ReactDOM from "https://esm.sh/react-dom@17.0.1";
import { marked } from "https://esm.sh/marked";
You can’t mount the app to a div with the id of preview as there should only be one element with that id. All you need in the HTML is a single element with a unique id for the mount.
Your initial markdown isn’t correct. You can use the markdown from the example project (copy and paste it exactly as is).
If you move the marked option call from the life cycle method to outside the component you should pass the last test as well. You can put it right after the import.
As an aside, the div that renders the markdown should be self-closing <someElementType /> as it does not take child content.
I updated the code with your tips, which were gladly welcomed!
Nevertheless, when I try to pass the tests, only 7 to 8 are greened!
In particular test 4 results with the following errors:
test 4: #preview’s only children should be those rendered by marked.js : expected ‘
I don’t know what is causing this error, given that when I type in the editor, the code is actually rendered in HTML in the previewer!!!
As a side note, I wanted to add Prism.js to the code, but the format for importing React and marked results in an error: it mentions that languages is not defined! In the code it is not marked since I excluded those lines with comments, to concentrate better on passing the challenges, but I wanted some insights on this as well.
Thanks again for guiding me towards the completion of these tasks!
Thanks for your help. I cannot change the mount element, since by doing so, it fails challenge 3!!!
I don’t know what is causing this issue with challenge 4, since in concrete, it actually applies the html to the editor text!!!
I do not know what happened, but as I deleted preview from html and mounted React with root, All challenges were passed!!!
I still do not know what was the reason causing the error, but I am finally glad, this project is over!!!
For future users who’ll struggle with this challenge, may use the code above as a reference. editor and preview should be on the same file (from what I understood), and then send everything to html dom![quote=“lasjorg, post:6, topic:616636, full:true”]
Sure you can. Make the id in the HTML root and use preview for the preview element.
ids should be unique. The test will only look at the first element with the preview id on it. The preview id must be on the element with the preview output. If an element that comes before it also has the same id the test will be looking at the content of the wrong element.