I am not able to render HTML data into the custom widget.
I tried below code:
render() {
const classes = {
[CSS.emphasis]: this.emphasized,
};
const { state } = this.viewModel;
const description = this.viewModel.description;
// Define dynamic styles
const loadingStyle = {
display: "block"
};
return (
<div class="data">
<div key="description" tabindex={this.tabindex} class="work" styles={loadingStyle}>
<div key="description" dangerouslySetInnerHTML={{__html: this.viewModel.description}}>
</div>
</div>
</div>
);
}
I am getting html format data lie <div><span><strong>Data</strong></span></div> in this.viewModel.description but I it's not getting rendered on view.
I am assigning viewmodel property from controller where widget is created as shown below.
mapWidget.viewModel.description = widget.MapWidgetManagement.Description;
mapWidget.viewModel.mapWidgetManagement = widget.MapWidgetManagement;
var bgExpand = new Expand({
view: mapView,
content: mapWidget,
expandIconClass: "esri-icon-question",
});
