Why is React.js not loading HTML code when using marked library

Question

I am trying to build a markdown editor for which I am using the Marked library My Code doesn't show any error but doesn't render the html at all.

Code :

class TextArea extends React.Component {
	render() {
		return (
			<div dangerouslySetInnerHTML={{__html: this.props.value}} />
		);
	}
}

class Markdown extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			value: " "
		};
		this.handleChange = this.handleChange.bind(this);
	}
	handleChange(event) {
		this.setState({ value: event.target.value });
	}
	render() {
		return (
			<div>
				<textarea onChange={this.handleChange} />
				<TextArea value={marked(this.state.value,{sanitize: true})} />
			</div>
		);
	}
}

ReactDOM.render(<Markdown />, document.getElementById("markdown"));

The input I have given to the code is in markdown format

Heading
=======

Sub-heading
-----------

### Another deeper heading

Paragraphs are separated
by a blank line.

Leave 2 spaces at the end of a line to do a  
line break

Text attributes *italic*, **bold**,
`monospace`, ~~strikethrough~~ .

Shopping list:

* apples
* oranges
* pears
Numbered list:

1. apples
2. oranges
3. pears

The rain---not the reign---in
Spain.

and the output give by marked library is

<h1 id="heading">Heading</h1> <h2 id="sub-heading">Sub-heading</h2> <h3 id="another-deeper-heading">Another deeper heading</h3> <p>Paragraphs are separated by a blank line.</p> <p>Leave 2 spaces at the end of a line to do a<br>line break</p> <p>Text attributes <em>italic</em>, <strong>bold</strong>, <code>monospace</code>, <del>strikethrough</del> .</p> <p>Shopping list:</p> <ul> <li>apples</li> <li>oranges</li> <li><p>pears Numbered list:</p> </li> <li><p>apples</p> </li> <li>oranges</li> <li>pears</li> </ul> <p>The rain---not the reign---in Spain.</p>

But It doesn't render the HTML Please Help me. Thanks in advance

Davin Tryon · Accepted Answer · 2017-10-25 13:53:12Z

4

this.state.value should be this.props.value because you are sending value in as a prop of TextArea:

class TextArea extends React.Component {
    render() {
        return (
            <div dangerouslySetInnerHTML={{__html: this.props.value}} />
        );
    }
}

answered Oct 25, 2017 at 13:53

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Kartikey Singh Over a year ago

On changing the code and running it it still shows no output.codepen.io/kartikey21/pen/LzKGmx?editors=0011 link for code

Davin Tryon Over a year ago

You changed the wrong one :) Inside TextArea make the change, not outside

Kartikey Singh Over a year ago

Please check the code in the link : codepen.io/kartikey21/pen/LzKGmx?editors=0011

Davin Tryon Over a year ago

Seems to be working fine for me in the codepen :) If I put ` ## header` in the textarea, I get a big Header value in the TextArea

Collectives™ on Stack Overflow

Why is React.js not loading HTML code when using marked library

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related