Posted 8 August 2018, 5:57 am EST
I have a function that dynamically generates React jsx code depending on a value of a field. This function will generate one of two wijmo Comboboxes depending on the value of a field. However whenever one field has first been generated and then the value of the field is changed the new Combobox does not show, instead the old one keeps showing. This is happening despite the fact that a label is also dynamically changed and that label does update properly. Do I need to destroy the Combobox somehow each time?
getParamView() {
let paramView = null;
if (this.state.selectedReport === "MarketingMaterial") {
paramView = (
<div className="col-md-9">
<div className="pm-form-grouping">
<label className="dropdown-label label-inline pm-label">SMAFact Card:</label>
<span className="padding-interior padding-bottom pm-dropdown-container">
<ComboBox
id="mm"
displayMemberPath="header"
selectedValuePath="binding"
itemsSource={this.marketingMaterialsEntities}
selectedIndexChanged={this.marketingMaterialsEntityChanged}
/>
</span>
<span className="padding-interior padding-bottom pm-form-grouping">
<label className="dropdown-label label-inline pm-label">Period Date:</label>
<InputDate
id="mmPeriodDate"
min={this.state.minDate}
max={this.state.maxDate}
valueChanged={this.marketingMaterialsPeriodDateChanged}
value={this.state.marketingMaterial.periodDate}
format="MMMM yyyy"
selectionMode="Month" />
</span>
<span className="padding-interior padding-bottom pm-form-grouping">
<button className="btn btn-outline-secondary" type="button" onClick={this.viewReport}>View Report</button>
</span>
</div>
<div className="mm-report">
<iframe src={this.state.url} width="820px" height= "765px" frameBorder="0" scrolling="no" />
</div>
</div>
);
debugger;
} else if (this.state.selectedReport === "DataPak") {
paramView = (
<div className="col-md-9">
<div className="pm-form-grouping">
<label className="dropdown-label label-inline pm-label">Data Pak:</label>
<span className="padding-interior padding-bottom pm-dropdown-container">
<ComboBox
id="datapak"
displayMemberPath="header"
selectedValuePath="binding"
itemsSource={this.dataPakEntities}
isRequired={Boolean(true)}
selectedIndexChanged={this.dataPakEntityChanged}
/>
</span>
<span className="padding-interior padding-bottom pm-form-grouping">
<label className="dropdown-label label-inline pm-label">Period Date:</label>
<InputDate
min={this.state.minDate}
max={this.state.maxDate}
valueChanged={this.dataPakPeriodId}
value={this.state.dataPak.period_id}
format="MMMM yyyy"
selectionMode="Month" />
</span>
<span className="padding-interior padding-bottom pm-form-grouping">
<button className="btn btn-outline-secondary" type="button" onClick={this.viewReport}>View Report</button>
</span>
</div>
<div className="datapak-report">
<iframe src={this.state.url} width="1070px" height= "765px" frameBorder="0" scrolling="no" />
</div>
</div>
);
debugger;
}
return paramView;
}
