CODEWITHSUNDEEP
javascripthtmlreactjsmarkdown
Kartikey Singh
Kartikey Singh

Reputation: 892

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

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

Upvotes: 1

Views: 1387

Answers (1)

Davin Tryon
Davin Tryon

Reputation: 67296

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}} />
        );
    }
}

Upvotes: 4

Related Questions