I have my element:
dangerouslySetInnerHTML: { __html: this.props.html.map(React.renderToStaticMarkup).join('') }
this.props.html
is an array of React Elements (built up from this method):
makeOutput(model) {
return <Key model={model} />;
}
When I run my code above in a breakpoint, I do get:
> this.props.html.map(React.renderToStaticMarkup).join('')
> "<span>b</span>"
However, when the element is output to the DOM, all that's shown is [object Object]
. Any reason for this?
This example shows that the technique works with no problem:
function makeOutput(text) {
return <Wrapper text={text} />;
}
var Wrapper = React.createClass({
render() {
return <div>Wrapping: {this.props.text}</div>
}
});
var App = React.createClass({
render() {
var items = [
makeOutput("one"),
makeOutput("two"),
makeOutput("three")
];
return (
<div dangerouslySetInnerHTML={{__html: items.map(React.renderToStaticMarkup).join("") }} />
);
}
});
React.render(<App />, document.getElementById("container"));
The problem must lie in some code you haven't yet revealed.
Try by convert your HTML to string type
// before
const content = <p>Hello</p>
// after update
const content = `<p>Hello</p>`
// implementation
<div dangerouslySetInnerHTML={{ __html: content }} />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With