Urgent help.
import React, { useEffect, useState, useRef } from “react”;
// import { connect } from “react-redux”;
import Handsontable from “handsontable”;
import { HotTable } from “@handsontable/react”;
import “…/…/…/…/public/css/test.css”;
const hotData = Handsontable.helper.createSpreadsheetData(6, 10);
const App = () => {
let tableRef = useRef(null);
let hotInstance = null;
let startRow;
let startColumn;
let endRow;
let endColumn;
const [counter, setCounter] = useState(0);
useEffect(() => {
hotInstance = tableRef.current.hotInstance;
}, [tableRef]);
useEffect(() => {
document.addEventListener(“click”, handleClick);
return () => document.removeEventListener(“click”, handleClick);
}, [handleClick]);
const handleClick = (event) => {
const { target } = event;
if (!target.classList.contains(“btn”)) {
return;
}
const color = target.getAttribute("data-color");
for (var j = 0; j < endColumn - startColumn + 1; j++) {
for (var i = 0; i < endRow - startRow + 1; i++) {
hotInstance.setCellMeta(
startRow + i,
startColumn + j,
"className",
color
);
}
}
hotInstance.render();
};
return (
Make cells green
Make cells orange
<button onClick={() => setCounter((prev) => prev + 1)}>Counter
<HotTable
ref={tableRef}
settings={{
data: hotData,
colWidths: 100,
rowHeights: 23,
rowHeaders: true,
colHeaders: true,
afterSelectionEnd: function (r, c, r2, c2) {
[startRow, endRow] = [Math.min(r, r2), Math.max(r, r2)];
[startColumn, endColumn] = [Math.min(c, c2), Math.max(c, c2)];
},
licenseKey: “non-commercial-and-evaluation”,
}}
/>
{counter}
</div>
);
};
export default App;