React markdown vs. vanilla JS markdown

JavaScript
#1

I did this markdown project with vanilla JS and it passes the tests okay.

Then I tried it with React Hooks and everything looks like it’s playing out okay but the tests fall short.

I’m especially confused why I can see the Previewer filled with the right formatting and also see the correct HTML elements in the DOM (with Chrome Dev tools) but some of the errors just don’t match what my eyes see.

Is there something with React that needs to happen on the page load so that the tests register the various elements?

#2

Just providing more feedback. I also checked out the Github test for this project and it seems like I have all those elements covered in the DOM:

Another interesting things is what is showing up in the Previewer after the test runs. It basically shows this:

First line.
Second line, same paragraph.
Third line, same paragraph.

Has anyone encountered this before? Any ideas what it means?

#3

That’s because when you’re calling cleanAndSetText the value of markdown is still the previous value, not the updated one.
The code between L20-L25 should be:

      cleanAndSetText(e.target.value); // pass the updated value
    }
  }
  
  const cleanAndSetText = (markdown) => { // new value
    let cleanHTML = DOMPurify.sanitize(markdown);

Also you’ll need to pass sampleCode in initial useEffect.

1 Like
#4

Thanks so much! The order of events throws me off.

So since this line was happening first

const [markDown, setMarkDown] = React.useState(sampleCode);

I thought within the function cleanAndSetText the DOMPurify was purifying the current markDown useState variable above which is why I didn’t use a parameter for that function.

But I think you’re saying, while that may be true that markDown value is old. So I really need to provide a parameter to cleanAndSetText and pass it the argument event.target.value so it’s the most current value.

Am I understanding that correctly?

#5