React dangerouslySetInnerHTML print '[object Object]'
I have an element:
dangerouslySetInnerHTML: { __html: this.props.html.map(React.renderToStaticMarkup).join('') }
this.props.html
is an array of React elements (created from this method):
makeOutput(model) {
return <Key model={model} />;
}
When I run my code above at a breakpoint, I get:
> this.props.html.map(React.renderToStaticMarkup).join('')
> "<span>b</span>"
However, when an element is rendered into the DOM, all that is shown is [object Object]
. Any reason for this?
+3
source to share
1 answer
This example shows that the method works without issue:
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 be some code that you haven't found yet.
+3
source to share