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

.selected {
  display: inline;
  font-size: 1.3em;
  color: #3C1A06;
}

#firstContainer {
  height: 180px;
  margin-bottom: 10px;
}

#secondContainer {
  height: 250px;
}

React

function renderData(data, numRow) {
  	console.log("expand object to view data");
  	console.log(data);

    var numCol = 5;
    //Remove numRow limiter here if showing all rows.
    numRow = 7;
    var name = [];
    var sales = [];
    var selectedData = {};
    
    console.log("");
    console.log("data extracted with our loop");
    for (var col = 0; col < numCol; col++) {
    	for (var i = 0; i < numRow; i++) {
      
      	//show some selected data (columns) in the console
        selectedData.name = data.data[i][0];
        selectedData.unitSales = data.data[i][4];
        console.log(selectedData);
        
        //render some data on the page
        var nameID = ("name"+(i+1));
        var saleID = ("sale"+(i+1));
        document.getElementById(nameID).textContent=data.data[i][0];
        document.getElementById(saleID).textContent=data.data[i][4];
    	}
    }
	}

function RenderVisualize () {
	let adv
  React.useEffect(function () {
   visualize({
    auth: {
      name: "joeuser",
      password: "joeuser",
      organization: "organization_1"
    }
}, function(v) {	
  function renderView(uri) {
    adv = v.adhocView({
      resource: "/public/Samples/Ad_Hoc_Views/04__Product_Results_by_Store_Type",
      //uncomment here and in html to render ad hoc view on page
      //container: "#container",
      success: function() {
      	let data = adv.data()._dataset_internal_.levelDataNodes[0].all.children[0].group.children[0].detail;
      	let counts = adv.data()._dataset_internal_.counts;        
        //render select ad hoc view data
				renderData(data, counts);
      },
      error: function(e) {
      	console.log(e);
    	},
    });
  }
  //render initial view
  renderView(); 
})}, [])

  return (
  <React.Fragment>
   <div className="background">
     <div className="content">
     <h4>Rendering select unit sales data from the first 7 rows of an ad hoc view.</h4>
      <h5>(View all data in the console)</h5>

      <div id="name1"...