JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://mobiledemo.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>
<div id="App"></div>

React

function RenderVisualize () {
  React.useEffect(function () {
visualize({
    auth: {
        name: "joeuser",
        password: "joeuser",
        organization: "organization_1"
    }
}, function (v) {
    
    buildControl("Chart types", v.report.chart.types); 
    
    buildControl("Resources types", v.resourcesSearch.types); 
    
    buildControl("Resources search sort types", v.resourcesSearch.sortBy); 
    
    buildControl("Report export formats", v.report.exportFormats);
    
    buildControl("Report table column types", v.report.table.column.types);
   
});

function buildControl(name, options) {

        function buildOptions(options) {
            let template = "<option>{value}</option>";
            return options.reduce(function (memo, option) {
                return memo + template.replace("{value}", option);
            }, "")
        }
    
    console.log(options);
    
    if (!options.length){
        console.log(options);
    }

        let template = "<label>{label}</label><select>{options}</select><br>",
            content = template.replace("{label}", name)
                .replace("{options}", buildOptions(options));

        $("#container").append($(content));
    }

  }, [])

  return (
    <div id='container'></div>
  )
}

ReactDOM.render(<RenderVisualize />, document.querySelector("#App"))