Custom HTML issue when migrating from 6.94 -> Startsharp 8.8.3

[sapster77]

Hi,
I am migrating from 6.9.4 to the startsharp 8.8.3 version. On a grid I had custom HTML to show a custom page (with program settings) as i did not need an actual grid.

I am unable to figure out how to make it work with the change from JQuery to JSX/fluent.

This is what I had previously (which worked) - in 8.8.3 this is showing me the raw html on the page, but with no errors.

Under imports I have: import $ from 'jquery'; in order to make the $ work. Any suggestions with fluent replacements to fix that are also highly welcome:-)

I realize that the issue probably lies with the container element and the html no longer being appended correctly, but I can't figure it out.
Thank you very much for your assistance and help:-)

ProgramSettingsGrid.tsx

`constructor(props: any) {
    super(props);
    this.loadSettings();
}

private async loadSettings() {
    const response = await ProgramsettingsService.List({});
    if (response.Entities.length > 0) {
        const settings = response.Entities[0];
        this.renderSettings(settings);
    } else {
        console.log("No settings found.");
    }
}`
 `private renderSettings(settings: ProgramsettingsRow) {
  let container = this.element.findFirst('.s-ProgramsettingsGrid');
  if (container.length === 0) {
      container = this.element;
  }
  container.empty();
  const lookbackSettingsHtml = `
      "valid HTML here"
  `;

const otherLookbackSettingsHtml = `
    "valid HTML here"
`;

const html = `
    <div class="settings-container">
        ${lookbackSettingsHtml}
        ${otherLookbackSettingsHtml}
        <button class="btn btn-primary mt-3" id="saveSettings">Save</button>
    </div>
`;

container.append(html);

// Initialize tooltips
$('[data-toggle="tooltip"]').tooltip();

// Bind change events to checkboxes to show/hide settings
this.element.findFirst('#lookbackEnabled').on('change', function () {
    if ($(this).is(':checked')) {
        $('#lookbackSettings').show();
    } else {
        $('#lookbackSettings').hide();
    }
});

this.element.findFirst('#otherLookbackEnabled').on('change', function () {
    if ($(this).is(':checked')) {
        $('#otherLookbackSettings').show();
    } else {
        $('#otherLookbackSettings').hide();
    }
});

this.bindSaveButton(settings);

}`

[VictorTomaili]

https://github.com/alex-kinokon/jsx-dom
check the jsx-dom documentation

[sapster77]

Problem solved.
For anyone else that might encounter this, the issue was in the string format of the html const in the above code. Removing the ' ' fixed it and the jsx-dom documention from the selected answer led to the correction of some wrong attributes.
Now its working sweet:-)