Custom Widget Not parsing HTML content provided in render()

08-24-2021 08:25 AM
New Contributor

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}}>


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",

0 Kudos
0 Replies