JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://underscorejs.org/underscore-min.js"></script>
<script type='text/javascript' src="https://mobiledemo.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>
<div style="font-size: 11pt">Selecting the following will add additional formating to our table.</div>
<div style="font-size: 11pt">In this case we are highlighting every numeric value in the "Unit Sales" column that is greater than 3.</div>
<button id="changeConditions">Change conditions for numeric column</button>

<div id="App"></div>

React

function RenderVisualize () {
  React.useEffect(function () {
visualize({
    auth: {
        name: "joeuser",
        password: "joeuser",
        organization: "organization_1"
    }
}, function (v) {
    //discover name through JRXML (field name by default)
    let salesColumnName = "_detail_level__sales_fact_ALL.sales_fact_ALL__unit_sales_2013",
        report = v.report({
            resource: "/public/Samples/Reports/04._Product_Results_by_Store_Type_Report",
            container: "#container",
            error: showError
        });
    
    $("#changeConditions").on("click", function() {
            report.updateComponent(salesColumnName, {
                conditions: [
                    {
                        operator: "greater",
                        value: 3,
                        backgroundColor: null,
                        font: {
                            color: "FF0000",
                            bold: true,
                            underline: true,
                            italic: true
                        }
                    },
                    {
                        operator: "between",
                        value: [5, 9],
                        backgroundColor: "00FF00",
                        font: {
                            color: "0000FF"
                        }
                    }
                ]
            })
            .then(printConditions)
            .fail(showError);
    });
    
    function printConditions(component){
        console.log("Conditions: " , component.conditions);
    }
    
    function showError(err) {
           alert(err);
    }
});
  }, [])

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

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