Custom Widget Not parsing HTML content provided in render()

RoshanShah — Tue, 24 Aug 2021 15:30:14 GMT

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",
});

topic Custom Widget Not parsing HTML content provided in render() in ArcGIS Enterprise Questions

Custom Widget Not parsing HTML content provided in render()