Need help for React Class Component error

Hi All,

There is an error in my project - Markdown Previewer.


Inside class component - “Markdown”, within the handleChange function I placed the code "document.getElementById(‘preview’).innerHTML = marked(this.state.currentText); " to put the HTML string coming from marked() into the ‘preview’ element. The handleChange function is called each time when there is a change in the content in element ‘editor’.So the above mentioned code should run each time there is a change in editor content. But Im not getting the desired output.

For eg: My input in editor is “Hello”, but output in preview is coming as “Hell”.

Im not understanding why this is happening. Please help. Thanks a lot for your time.

I haven’t done this project yet but I know you shouldn’t be directly accessing the DOM in your React app and if you really need to you should probably use Refs.

I removed the DOM selectors and added {this.state.currentText} to your id='preview' div and that will get mirrored output in both divs.

@br3ntor Can you tell me why we shouldn’t be directly accessing DOM in React App ??

1 Like

One of the major features of React is that it uses what’s called a virtual DOM.

It’s hard to explain since I haven’t taken the time to fully understand it, but in a nutshell it makes a copy of the DOM and holds it in memory and can change that based on the state and update just the portions of the DOM that require it.

There are a lot of articles out there, you can google React virtual DOM.

Here are some links that offer a better explanation.

You don’t need to have a comprehensive understanding to use React but you should understand that you want to render conditionally based on the state rather than directly accessing the DOM when using React.

I haven’t done the project you are on but after I finished the React section of the curriculum I went to the React Docs and followed their tutorial.

Then I went through the main concepts section and followed along.

I planned to do the markdown project after but started to remake an older personal project with React instead.

I highly recommend coding along in those two sections from the offical docs.

Codepen is nice but I find to be better for me for working with React.

Eventually you will want to use or you can start with that.
Some more info here in the docs:

Okay… Im checking those links. Anyway thank you. :slight_smile:

Hi… I made the necessary changes. One more thing is that my ‘CLEAR’ button is not working. The logic seems to be right. But its not working. I tried searching how others do it… but the logic is similar. Can you take a look ? Thanks.

Can you re-link your project? It looks like your original link doesn’t point to your current project anymore.

New Link -

Sorry I deleted the old one.

Hmm, I’m not sure. I will have to look at it more later I have to go at the moment.

I’ll check it out more when I get some time in a few hours. Good luck!

Edit: One piece of troubleshooting advice I can give is: Open a new codepen and try and recreate just that basic functionality, if you can get that working it can help to see what’s going on.

Oh I figured it out.

Read this and see if you can figure out what you need to do.

Yes… I got it now… Thanks :slight_smile: