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.
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.
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. https://reactjs.org/tutorial/tutorial.html
@br3ntor
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.
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.
