Rendering HTML produced by Markdown

I have been working on the build a Markdown Previewer Project, and I have been having trouble rendering my HTML produced by Markdown. I’ve been trying to render the code that the markdown produces in my <p> element in the return section of my MarkdownBox component. I’ve seen others do it in separate pieces (not in the main component); is there any way to convert the html directly in my react component?

Also, I’m not sure why my default text doesn’t appear in the preview section when the page first loads. I have to type something into the textbox before it will appear. How can I fix this?

Thanks!

Here is the link to my pen:

This is what appears since I haven’t been able to render the HTML:

Breaking the logic into different components helps to make the application easier to read (and/or less prone to error) but it’s up to you to make one or multiple components.

Then you should ask yourself where do you want your preview to exist ? It will render h1, p, blockquote etc…
For your last question I will refer you to React - state-and-lifecycle, you need to ask yourself why and when your application re-render or update etc…

Do you have any suggestions on how to render it in the return section? I was considering using JQuery and the $(…).html(…), but I wasn’t sure how to incorporate that in my react. Is that possible?

No you cannot use jquery with react. And there is no point to do that.
I think you’re overthinking, in you’re render method you return your component with its styling, html, logic etc…
But ask yourself in plain HTML where would you put the render of the textarea? Or I can turn my question differently, how do you use the p tag?

1 Like

I think I’m a little confused how everything fits together. In plain HTML, do you put the render of the textarea in the main body of the HTML? What do you mean by the render of the textarea?
In my current code, I am using the p tag to display the text that has been entered in the textarea.

The answer or hint is in your answer, you’re using a p tag. But in html why do use a p tag, what are you saying to the web browser when you’re using a p tag?
And how would you create/render a “box” in html which tag do you use ?

1 Like

When we’re using the p tag, we’re telling the browser that our content is a paragraph? And to create a box in html would we just use textarea? What type of box?

I don’t think I understand how to use the markdown program. I’ve been looking it up to try to find a simplified version, but I haven’t been able to find a good explanation of all the components. I must be missing something, because even though I’ve broken my code up now, it still won’t render. I edited the example program and was even able to get it to render by not separating the components. I’m not sure which component they have that I’m missing is causing it not to render. I don’t want to just copy the example, I would like to actually understand what the code is doing!

Thanks!

When I deleted the HTML comments within the react, I was able to get it to render. That must’ve been why nothing was showing up, sorry about that!

yes p tag is for paragraph but you know that markdown is actually gonna create a bunch of h1, h2, h3, p, blockquote etc… So you don’t want your preview to live inside a p.
Most of the time you will be using a div tag right ?

The markdown in your app is working, when you start typing in the textarea the render happens because you created an event handleChange but you need your app to render on first load, this is where “lifecycle methods” are important. In the link I sent you they will give you a brief explanation but you can find the actual order of what happens in your react app.

componentDidMount()
componentWillUnmount()
componentWillUpdate()
componentDidUpdate()

They are just some of them (lifecycle methods).
You did it! Congrats :slight_smile:

1 Like