JSFiddle - React, Tailwind, and code Playground

HTML

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

React

function RenderVisualize () {
  React.useEffect(function () {
let reportResource = "/public/Samples/Reports/States";

visualize({
    auth: {
        name: "joeuser",
        password: "joeuser",
        organization: "organization_1"
    }
}, function (v) {
    v("#main").report({
        resource: reportResource,
        linkOptions: {
            events: {
                "click": function (ev, link) {
                    if (link.type == "ReportExecution") {
                        v("#drill-down").report({
                            resource: "/public/Samples/Reports/Cities",
                            params: {
                                state: [link.parameters.store_state]
                            },
                        });
                        console.log(link.parameters.store_state);

                    }
                }
            }
        },
        error: function (err) {
            alert(err.message);
        }
    });


});


  }, [])

  return (<div>
    <div id="container"></div>
    <div id="main"></div>
    <div id="drill-down"></div>
</div>
  )
}

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