Typescript Render showing button as text instead of HTML

Question

I have a typescript file where i am rendering a simple hello world div. I can render an HTML table, however adding an Input or a Button renders literally as "<button>my button</button>".

From my expierience, it seems like I am missing a package to import. I have pasted my imports and the Render() function below:

import * as watchUtils from "esri/core/watchUtils";
import Handles = require("esri/core/Handles");
import { declared, property, subclass } from "esri/core/accessorSupport/decorators";
import MapView = require("esri/views/MapView");
import Widget = require("esri/widgets/Widget");
import { renderable, tsx } from "esri/widgets/support/widget";



render() {

    if(resolvedValue != null){
        selectedHasfolder = "<table >"; 
        for(var i = 0; i < resolvedValue.length; ++i){
            selectedHasfolder += "<tr><td><button >Select Inspection(s) to proceed.</button></td><td>" + resolvedValue[i]["PropertyA"] + "</td></tr>";
        }       
                        selectedHasfolder += "</table>";    


    }   


return <div class="basemap23"  style="background-color:#FFFFFF;" innerHTML={selectedHasfolder}></div>;

Todd Skelton · Accepted Answer · 2020-09-03T20:39:58.827

1

I recommend you do something like this and not use innerHTML.

function Component() {
  const selectedHasFolder = resolvedValue ? (
    <table>
      {resolvedValue.map((item, index) => (
        <tr key={index}>
          <td>item.propertyA</td>
          <td>
            <button>Select Inspection(s) to proceed.</button>
          </td>
        </tr>
      ))}
    </table>
  ) : null;

  return (
    <div class="basemap23" style="background-color:#FFFFFF;">
      {selectedHasFolder}
    </div>
  );
}

edited Sep 03 '20 at 20:39

answered Sep 03 '20 at 19:59

Todd Skelton

6,839
3
36
48

It seems like it should work, but I am a little off. Could you help by updating your answer to show a second column in the Table for item.PropertyA? I think that is where I am messed up. I updated my question to reflect this @Todd Skelton – objectively C Sep 03 '20 at 20:38
@objectivelyC I've updated my answer with another column `item.propertyA`. – Todd Skelton Sep 03 '20 at 20:40
i posted a follow up question that should hopefully be easy to answer if you can take a look! https://stackoverflow.com/questions/63731770/typescript-pass-mapped-element-to-function-onclick – objectively C Sep 03 '20 at 21:25
if you are still available, i have posted another beginner TypeScript question: https://stackoverflow.com/questions/63905083/typescript-this-is-undefined-when-calling-a-function-within-html-string – objectively C Sep 15 '20 at 15:27

Typescript Render showing button as text instead of HTML

1 Answers1