Object error in react

[augsaba]

Hi,
I am working on one of the FrontEnd development projects “Markdown Previewer”.I want to develop it in react but I got an error. I am a newcomer in react, please help me in resolving this problem.My code so far is:

class Editorcomponent extends React.Component{
    constructor(props) {
    super(props);
  }
   render(){ 
    return (<div >
  <textarea > HI    </textarea>
   <Previewcomponent text={document.getElementById("editor").innerHTML}/>
  
</div>);
   }
   };

class Previewcomponent extends React.Component{
    constructor(props) {
    super(props);
  }
   render(){
    return(
       <div >
        <textarea > HI   </textarea>
        </div>);
   }
};

The error I am getting is this:
Object Error
{}

Here I want to get innerHTML from editor component and want to render it in preview component.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:99.0) Gecko/20100101 Firefox/99.0

Challenge: Build a Markdown Previewer

Link to the challenge:

freeCodeCamp.org

[JeremyLT]

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

[lasjorg]

I would suggest you look at the example project. This project is a little difficult to code without any example code to look at. It doesn’t have to be the freeCodeCamp example but some example code for a React markdown previewer.

---

• Look at dangerouslySetInnerHTML

• Don’t use the DOM content, use state. The app should have state and DOM (the page) should reflect that state. The state is also what you would pass to dangerouslySetInnerHTML.

• You need a library to convert the markdown, look at markedjs (well you do not need it but it is a lot more work without it).

[kevinSmith]

Yeah, definitely agree with what was said above. I suspect that your error is because your DOM query is returning null and you’re trying to access a property on it. But you shouldn’t be doing it that way anyway, as explained above.

Don’t get discouraged. This is hard stuff and React is kind of weird when you’re learning it. I mean, it’s really cool, but it does take a while to learn to “think like React”.

I’d also suggest formatting code as you go. It really does save you a lot of time in the long run.

[augsaba]

Thank you for the reply .Will try this with state