React component doesn't render content
Question
import React, { Component } from 'react';
import './Imprint.scss';
import ReactMarkdown from 'react-markdown';
import ContentSection from '../ContentSection';
import axios from 'axios';
import { IMPRINT_URL } from '../../auth_axios';
class Imprint extends Component {
constructor(props) {
super(props);
this.state = {
imprintText: null,
}
}
componentDidMount() {
this.fetchImprint();
}
render() {
const {
imprintText
} = this.state;
return (
<section className="bsl-imprint row">
<ContentSection>
<div className="col-xs-12 col-md-6 col-md-offset-3">
<h2 className="bs-main-heading">Imprint</h2>
<p>
<ReactMarkdown source={imprintText}/>
</p>
</div>
</ContentSection>
</section>
);
}
fetchImprint() {
axios.get(IMPRINT_URL)
.then(res => {
console.log(res)
this.setState({imprintText: res.data})
})
.catch(err => {
console.log(err);
});
}
}
export default Imprint;
I'm using React 15.4, Redux 3.7, with Babel to render some text. So I'm trying to render imprintText on the ReactMarkdown tag inside a component, but it's displaying plain HTML code instead of the content. I provide an screenshot to show you how it looks. Any ideas??
2 answers
solution1
1 2017-11-29 11:07:36
According to react-markdown docs , you have to set the escapeHtml prop to false , so that the <ReactMarkdown> component renders HTML as well, ie:
<ReactMarkdown source={imprintText} escapeHtml={false}/>
It's not generally recommended to use dangerouslySetInnerHTML . Besides, I think your imprintText doesn't need all the <head> and <body> tags, just the <div> tag onwards would suffice.
solution2
0 ACCPTED 2017-11-29 10:54:53
If your 'imprintText' is string you have to do in the following way,
dangerouslySetInnerHTML={{ __html: this.state.imprintText}}
eg:
<div dangerouslySetInnerHTML={{ __html: this.state.imprintText }} />
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.