I was working on this Markdown Previewer and ran into an issue of app crashing after reloading the page and also not passing Test #5.
After some Google search, people said that localStorage needed to be used in order to render a default text on the page. But still, no progress after trying to work with localStorage.
I suspect that I’m not understanding useEffect() all the way.
Also, I’m writing the App using functional components instead of outdated class components. In order to learn the most modern front end development approaches.
I deleted the line of code which is causing the crash.
But here if you add this code instead of a comment:
useEffect(() => {
setText('# Welcome to my React Markdown Previewer! \n## This is a sub-heading... \n[link](https://www.freecodecamp.org) \n\nHeres some code, `<div></div>`, between 2 backticks.\n\n ```<script></script>```\n- And of course there are lists.\n- And of course there are lists.\n> Block Quote\n\n**bold text**, _italic text_, ~~crossing stuff out~~\n\n');}, []);
The App will work, but after refreshing the page it will crash.
I don’t think this is a good use case for the useEffect() hook. I suggest you define the default text as a normal string variable, then set this variable as the default value of text.
I made a copy of your CodePen. I encoded the text beforehand and then used decodeURIComponent in that same spot, and it was able to render. It still doesn’t pass the tests, however.
I would suggest setting this value by default in your text variable.
I just went into the web browser Dev Tools Console and used encodeURIComponent on your string before importing it back into the project. To be honest, I am on the React learning path, as this is foreign territory to me. I am an expert at vanilla JS, but React itself is new.
I’m pretty sure it is Codepen being a derp because I can’t replicate it on Stackblitz.
But you definitely do not need that useEffect. You can set an initial const variable to that string outside the components and initialize the text state with that string.
That won’t fix the Codepen issue though. Edit: actually it might but you have to remove the useEffect code, if you just comment it out it won’t work it seems (which is weird).
interesting. How do I submit the project then?! Since not all of the tests passing, and the reason being codepen itself.
Well I deleted it, and followed what you suggested. But it still breaks after i refresh the page.
When I initially tested it with a different string it didn’t help but that might have been because of the useEffect. But with your current Codepen it does fix it (the refresh issue).
Try using the string from the example project.
The only test you are failing is the last bonus one and that is not because of Codepen you need to look at the docs for the marked lib. It has an option for that last test.
I learned a lot. Definitely no need for useEffect lol.
The problem was, is that I wrote all my markdown inside a basic string surrounded by single quotes 'string'. When I changed single quotes to backtickes `` . Suddenly everything worked.
Well, your original code was working on Stackblitz so I’m not really sure what is going on.
The output on Codepen looks like a broken Babel transpile (Babel is used to transform the JSX). Part of the markdown string was in it and the rest was createElement calls as strings.
Strings can be fragile, like what is and isn’t allowed inside a string and what needs escaping. The combination of single and double quotes if not done correctly can also break it.
But as I said, it worked on Stackblitz so I’m not sure why it breaks on Codepen other than something to do with the Babel transpile.
BTW, in React your class attribute should be className.
Interesting the way all this different environments work. Even though you said it works, in my browser didn’t work until I copied the string from the example code provided by the FCC and inserting it between backticks instead of single quotes.
Thank you again.
