Failing tests 2, 3, 4 and 6 for unknown reason - Front End Development Libraries Projects - Build a Markdown Previewer

JavaScript
1

Tell us what’s happening:
I am failing the following tests, however I’ve read through each of them and I believe that my work does actually fulfill these tests.

  1. (Test 2) I can see an element with corresponding id=“preview”
  2. (Test 3) When I enter text into the #editor element, the #preview element is updated as I type to display the content of the textarea
  3. (Test 4) When I enter GitHub flavored markdown into the #editor element, the text is rendered as HTML in the #preview element as I type (Hint: You don’t need to parse Markdown yourself - you can import the Marked library for this: https://cdnjs.com/libraries/marked)
  4. (Test 6) When my markdown previewer first loads, the default markdown in the #editor field should be rendered as HTML in the #preview element

I am not sure why it’s not working, but I suspect the failure may be because I’m using the react-markdown library as suggested by another user, however I am not sure how plausible of an explanation this is.

Notably, test 5 (When my markdown previewer first loads, the default text in the #editor field should contain valid markdown that represents at least one of each of the following elements: a header (H1 size), a sub header (H2 size), a link, inline code, a code block, a list item, a blockquote, an image, and bolded text) works, which further puzzles me.

Thank you very much for your help.

Your code so far
It is available on CodePen.

Your browser information:

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

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

Link to the challenge:

2

You need to wrap the markdown component inside an element with the preview id. You can’t put it on the component.

You can use the remark-breaks plug-in for the last test. Read the react-markdown docs to see how you add plug-ins (it is just a prop on the component).

3

For some reason, my project is now no longer passing Test 1: I can see a element with corresponding id=“editor”. It used to pass, but it doesn’t pass any longer.

The specific message provided is
‘’’
#editor is not defined : expected null to not equal null
‘’’

However, the #editor is clearly defined; I’ve wrapped the ‘’‘textarea’‘’ with the ‘’‘id=“editor”’‘’ in the ‘’‘render’‘’ method of class ‘’‘MyComponentWithButton’‘’.

Tests 3,4,5 and 6 still do not work, but I felt it is best to address the first test first, and then see if fixing this test provides a hint as to the others.

Also, there is no longer any output in the output display; I believe that this is some sort of glitch with my code, but I intend to fix this later after addressing the first failed test.

4

I also wanted to say thanks in advance for your help; I understand some of my questions might be somewhat basic, but I am hopeful that understanding these fundamentals will help me understand how to use React.

5

Use https://esm.sh instead of https://cdn.skypack.dev for the imports.

You should only have one root element in the HTML, that is where the parent component is mounted/rendered. It can’t use the preview id, which should be reserved for the markdown preview output element (you can not have the same id twice).

You do not need the MyComponent2 component at all.

You have to wrap the ReactMarkdown component inside an element with the preview id on it.

6

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