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

[dariusv]

SmartClient Version: v12.1p_2021-05-22/LGPL Deployment (built 2021-05-22)

Chrome Version 101.0.4951.64 (Official Build) (64-bit)

I have just copied code from documentation and it give me error:
https://smartclient.com/smartclient-...ss..HeaderItem

<DynamicForm width="300">
    <fields>
        <field defaultValue="Office Supplies" type="header"/>
        <field title="Item" type="text"/>
    </fields>
</DynamicForm>

src/page/invoicing/tabs/InvoiceAdHocChargesTabLayout.tsx:96:25 - error TS2339: Property 'fields' does not exist on type 'JSX.IntrinsicElements'.

96 <fields>
                           ~~~~~~~~

src/page/invoicing/tabs/InvoiceAdHocChargesTabLayout.tsx:97:29 - error TS2339: Property 'field' does not exist on type 'JSX.IntrinsicElements'.

97 <field defaultValue="Office Supplies" type="header"/>
                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/page/invoicing/tabs/InvoiceAdHocChargesTabLayout.tsx:98:29 - error TS2339: Property 'field' does not exist on type 'JSX.IntrinsicElements'.

98 <field title="Item" type="text"/>
                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/page/invoicing/tabs/InvoiceAdHocChargesTabLayout.tsx:99:25 - error TS2339: Property 'fields' does not exist on type 'JSX.IntrinsicElements'.

99 </fields>
                           ~~~~~~~~~

File where I have added the code:

///<reference path="../ds/InvoiceAdHocChargeDataSource.ts"/>
///<reference path="tabs/InvoiceRecordPriceTab.ts"/>


namespace page.invoicing.tabs {

    import InvoiceRecordDataSource = page.invoicing.ds.InvoiceRecordDataSource;

    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"
                                  showRecordComponents
                                  showRecordComponentsByCell

                        >
                            <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() {

            this._dynamicForm.getFields().forEach((item) => {
                if (item.name && this._newFormFields.indexOf(item.name) > -1) {
                    item.show()
                } else {
                    item.hide()
                }
            })
        }


    }
}

So question - why I am getting this error, or how to add simple text to the form like in documentation example?

[dariusv]

Found solution:

<HTMLFlow contents={`<span>test</span>`}/>

[Isomorphic]

Glad you found the solution, however, it's unclear what problem you were having...

Your initial example does not try to add any plain HTML text, but you report an error, which does not seem to match up to the sample code. What sample code would reproduce that error?

[dariusv]

Glad you found the solution, however, it's unclear what problem you were having...

Your initial example does not try to add any plain HTML text, but you report an error, which does not seem to match up to the sample code. What sample code would reproduce that error?

noticed your response just now. So I was having problem in adding text to form.
Yes, I did not use html in the initial example, because I did not know that I can. I used code which I saw in documentation

<DynamicForm width="300"> <fields> <field defaultValue="Office Supplies" type="header"/> <field title="Item" type="text"/> </fields> </DynamicForm>

It is hard to setup single application to reproduce this problem, it would take a lot of time, so since I have found solution, I think for now it is not worth the time. I hoped that from the errors provided I could get an answer.