How to add text to the form in smartclient? TS2339: Property 'fields' does not exist on type 'JSX.IntrinsicElements' - smartclient

Question

SmartClient Version: v12.1p_2021-05-22/LGPL Deployment (built 2021-05-22)
I have just copied code from documentation:
https://smartclient.com/smartclient-latest/isomorphic/system/reference/?id=class..HeaderItem
<DynamicForm width="300">
<fields>
<field defaultValue="Office Supplies" type="header"/>
<field title="Item" type="text"/>
</fields>
</DynamicForm>
Getting those errors:
src/page/invoicing/tabs/InvoiceAdHocChargesTabLayout.tsx:57:25 - error TS2339: Property 'fields' does not exist on type 'JSX.IntrinsicElements'.
57 <fields>
~~~~~~~~
src/page/invoicing/tabs/InvoiceAdHocChargesTabLayout.tsx:58:29 - error TS2339: Property 'field' does not exist on type 'JSX.IntrinsicElements'.
58 <field defaultValue="Office Supplies" type="header"/>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/page/invoicing/tabs/InvoiceAdHocChargesTabLayout.tsx:59:29 - error TS2339: Property 'field' does not exist on type 'JSX.IntrinsicElements'.
59 <field title="Item" type="text"/>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/page/invoicing/tabs/InvoiceAdHocChargesTabLayout.tsx:60:25 - error TS2339: Property 'fields' does not exist on type 'JSX.IntrinsicElements'.
60 </fields>
~~~~~~~~~
[12:30:00 PM] Found 8 errors. Watching for file changes.
///<reference path="../ds/InvoiceAdHocChargeDataSource.ts"/>
///<reference path="tabs/InvoiceRecordPriceTab.ts"/>
Full file:
namespace page.invoicing.tabs {
import InvoiceAdHocChargeDataSource = page.invoicing.ds.InvoiceAdHocChargeDataSource;
export class InvoiceAdHocChargesTabLayout implements core.Layout<isc.IVLayout> {
readonly sc: isc.IVLayout;
public _listGridRecords: isc.IListGrid<InvoiceAdHocChargeDataSource.Record>
private _dynamicForm: isc.IDynamicForm<InvoiceAdHocChargeDataSource.Record>;
private readonly _newFormFields = ["feeCode", "description", "price", "quantity", "vatCode", "remarks"];
private readonly _events = {
}
get events() {
return utils.Callback.publish(this._events)
}
constructor() {
this.sc =
<VLayout>
<HLayout height={30} membersMargin={5} layoutMargin={0}>
<LayoutSpacer/>
</HLayout>
{this._listGridRecords =
<ListGrid dataSource={InvoiceAdHocChargeDataSource.sc()}
useAllDataSourceFields={false}
autoFetchData={false}
selectionType="single"
// editEvent="doubleClick"
showRecordComponents
showRecordComponentsByCell
// createRecordComponent={(record, colNum) => this._createListGridRecordComponent(record, colNum)}
// canEdit={core.AccessControl.instance.has(InvoiceRecordDataSource.get(), c.system.type.Permission.Update)}
>
<ListGridField name={"feeCode"}/>
<ListGridField name={"description"}/>
<ListGridField name={"quantity"}/>
<ListGridField name={"price"}/>
<ListGridField name={"vat"}/>
</ListGrid>
}
<DynamicForm width="300">
<fields>
<field defaultValue="Office Supplies" type="header"/>
<field title="Item" type="text"/>
</fields>
</DynamicForm>
{
this._dynamicForm =
<DynamicForm dataSource={InvoiceAdHocChargeDataSource.sc()} useAllDataSourceFields={true}>
<FormFieldItem name="feeCode"
required={true}
/>
<FormFieldItem name="description"
required={true}
/>
<FormFieldItem name="price"
required={true}
/>
<FormFieldItem name="quantity"
required={true}
/>
<FormFieldItem name="vatCode"
required={true}
/>
<FormFieldItem name="remarks"/>
</DynamicForm>
}
</VLayout>
}
showNewForm() {
// todo matyt inicializtuot pagal InvoiceDataTabLayout
this._dynamicForm.getFields().forEach((item) => {
if (item.name && this._newFormFields.indexOf(item.name) > -1) {
item.show()
} else {
item.hide()
}
})
}
}
}
What is wrong here that code copied from documentation does not work? What I am missing? Where to look at?
Documentation shows .xml example. My file is .tsx. So probably need to change something in that example.

Answer 1

Found a way to add text:
<HTMLFlow contents={`<span>test</span>`}/>