JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://infra-platforms-phase2-18418-anshinde.pfa.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>
<div id="app"></div>

CSS

#text {
  margin-bottom: 7px;
}

#container {
  height: 300px;
  margin-left: 20px;
}

/*Start of Crosstab specific styles*/
/*Crosstab side panel*/
#container .jr-mDatatable-cellRowlabel.jr-mDatatable-cellField.jr {
  background-color: #E0D2BC;
  font-weight: bold;
  color: black;
}

/*Crosstab totals section in side panel*/
#container .jr-mDatatable-cell.jr-mDatatable-cellRowlabel.jr.jr-mDatatable-cellTotal {
  background-color: #E0D2BD;
  border: 1px solid #c19a83;
}

/*Crosstab totals in main table - even row*/
#container .jr-mDatatable-rowEven.jr .jr-mDatatable-cell.jr-mDatatable-cellValue.jr-mDatatable-cellTotal.jr {
  background-color: #e8dcd0;
  border: 1px solid #ad795b;
}

/*Crosstab totals in main table - odd row*/
#container .jr-mDatatable-rowOdd.jr .jr-mDatatable-cell.jr-mDatatable-cellValue.jr-mDatatable-cellTotal.jr {
  background-color: #e8dcd0;
  border: 1px solid #ad795b;
}

/*Crosstab value in main table - odd row*/
#container .jr-mDatatable-rowOdd.jr .jr-mDatatable-cell.jr-mDatatable-cellValue.jr {
  background-color: #F0E9E0;
  border: 1px solid #ad795b;
}

/*Crosstab value in main table - even row*/
#container .jr-mDatatable-rowEven.jr .jr-mDatatable-cell.jr-mDatatable-cellValue.jr {
  background-color: #F0E9E0;
  border: 1px solid #ad795b;
}

/*Table styles*/
/*Datatable headers*/
#container .jr-mDatatable-header.jr .jr-mDatatable-row.jr .jr-mDatatable-cell.jr {
  background-color: #8e5f40;
  font-size: 1.24em;
  font-weight: bold;
  color: white;
}

/*Header for cell text*/
#container .jr-mDatatable-header.jr .jr-mDatatable-row.jr .jr-mDatatable-cell-text {
  padding-top: .30em;
}

/*Header for cell numbers*/
#container .jr-mDatatable-header.jr .jr-mDatatable-row.jr .jr-mDatatable-cell-number {
  padding-top: .60em;
}

/*Datatable cells*/
#container .jr-mDatatable-cell.jr {
  color: black;
  font-size: 1.14em;
  border: none;
}

/*Datatable text style*/
#container .jr-mDatatable-cell-text.jr {
  line-height: 25px;
}

/*Datatable odd...

React

function RenderVisualize () {
  React.useEffect(function () {
  	visualize({
    auth: {
      name: "joeuser",
      password: "joeuser",
      organization: "organization_1"
    }
}, function(v) {
  	let adv,
    text = document.getElementById("text"),
    apply = document.getElementById("apply"),
    res = document.getElementById("res");

    adv = v.adhocView({
      resource: "/public/viz/Adhoc/Chart2",
      container: "#container",
      success: function() {
        //use to find available params
        console.log(adv.data().metadata.inputParameters);
      },
      error: function() {
        alert("error");
        console.log(arguments);
      }
    });

    apply.onclick = function() {
      adv.params({
        sales_fact_ALL__store_sales_2013_1: [parseInt(text.value)]
      }).run().done(function(data) {
        res.innerHTML = "[" + data._dataset_internal_.counts.join() + "]";
      }).fail(function() {
        console.log("fail");
        console.log(arguments);
      })
    }
  })}, [])

  return (
  <React.Fragment>
     <div>
      IC Value
      <input id="text" type="text" value="10"/>
      <button id="apply">Apply</button>
      </div>     

      <div>
        Count of values received:
        <span id="res"></span>
      </div>
      <div id="container" style={{ height:"400px",position:"relative" }}></div>

  </React.Fragment>
  )
}

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