Report Viewer Component - Setting Parameter Values

import React, { Fragment } from "react";
import ReactDOM from "react-dom";
import { Viewer } from "@mescius/activereportsjs-react";
import "@mescius/activereportsjs/pdfexport";
import "@mescius/activereportsjs/htmlexport";
import "@mescius/activereportsjs/tabulardataexport";
import "@mescius/activereportsjs-i18n";
import { FontStore } from "@mescius/activereportsjs/core";

const initCategories = [
  {
    categoryId: 1,
    categoryName: "Beverages",
    checked: true,
  },
  {
    categoryId: 2,
    categoryName: "Condiments",
    checked: false,
  },
  {
    categoryId: 3,
    categoryName: "Confections",
    checked: false,
  },
  {
    categoryId: 4,
    categoryName: "Dairy Products",
    checked: false,
  },
  {
    categoryId: 5,
    categoryName: "Grains/Cereals",
    checked: false,
  },
  {
    categoryId: 6,
    categoryName: "Meat/Poultry",
    checked: false,
  },
  {
    categoryId: 7,
    categoryName: "Produce",
    checked: false,
  },
  {
    categoryId: 8,
    categoryName: "Seafood",
    checked: false,
  },
];


function App() {
  const [categories, setCategories] = React.useState(initCategories);
  const [previewDisabled, setPreviewDisabled] = React.useState(false);
  const viewerRef = React.useRef(null);

  function onPreview(){
    const categoryIds = categories.filter(cat=>cat.checked).map(cat=>cat.categoryId);
    viewerRef.current.Viewer.open("reports/multi-value-param.rdlx-json", {
      ReportParams: [
        {
          Name: "CategoryId",
          Value: categoryIds,
        },
      ],
    })
  }

  React.useEffect(()=>{
    onPreview();
  }, [])

  function onCheckedChange(categoryId) {
    setCategories((val) =>
      val.map((cat) => {
        if (cat.categoryId === categoryId)
          return { ...cat, checked: !cat.checked };
        return { ...cat };
      })
    );
  }

  
  return (
    <Fragment>
      <div class="container-fluid">
        <div class="form-group mb-3 mt-3">
          <div>
            <label>Select Product Categories</label>
          </div>
          {categories.map((cat) => (
            <div className="form-check form-check-inline" key={"category" + cat.categoryId}>
              <input
                id={"category" + cat.categoryId}
                className="form-check-input"
                type="checkbox"
                checked={cat.checked}
                onChange={() => onCheckedChange(cat.categoryId)}
              />
              <label className="form-check-label" for={"category" + cat.categoryId}>{cat.categoryName}</label>
            </div>
          ))}
          <div className="mt-1">
            <button type="button" className="btn btn-outline-primary" onClick={()=>onPreview()} disabled={previewDisabled} >Preview Report</button>
          </div>         
        </div>
      </div>

      <div id="viewer-host">
        <Viewer theme="ActiveReports" ref={viewerRef} documentLoaded={()=>setPreviewDisabled(false)} reportLoaded={()=>setPreviewDisabled(true)} />
      </div>
    </Fragment>
  );
}

FontStore.registerFonts("/activereportsjs/demos/resource/fontsConfig.json");
ReactDOM.render(<App />, document.getElementById("root"));