React state - checkboxes

Tags: #<Tag:0x00007efc704b5c80> #<Tag:0x00007efc704b5b40>
#1

I’m having trouble keeping state in sync with React specifically with a simple grid of checkboxes. The data is:

const [dataTypes, setDataTypes] = useState([
{ include: true, overrideExistingData: true },
{ include: true, overrideExistingData: true },
{ include: true, overrideExistingData: true },

]);

I’m trying to update state in the following way:

afterChange={(change, source) => {
if (source === “edit”) {
setDataTypes(dataTypesHotTable.current.hotInstance.getData());
}
}}

However, by logging this to the console, I see that this method is returning the data in the different format pasted below, which the table doesn’t know how to interpret. What would be the cleanest way to resolve this issue?

[
[true, true],
[true, true],
[true, true],
];

#2

Hi @tyler.davis

Can you please share more details about your requirements? Also the code demo showing your current implementation would be helpful to see the current output.

#3

Hi Adrian – It’s just a Handsontable with 6 checkboxes that can be set to true or false. I’m struggling with how to get the Handsontable to sync with the useState React hook so that the table retains the data when renders are triggered:

const [dataTypes, setDataTypes] = useState([

{ include: true, overrideExistingData: true },

{ include: true, overrideExistingData: true },

{ include: true, overrideExistingData: true },

]);

const dataTypesHotTable = useRef(null);

return (

<div className="CEPageDataTypes">

  <HotTable

    ref={dataTypesHotTable}

    data={dataTypes}

    rowHeaders={["Claims", "Enrollment", "Membership"]}

    colHeaders={["Include", "Overwrite Existing CERT Data"]}

    contextMenu={false}

    comments={true}

    columns={[

      { data: "include", type: "checkbox" },

      { data: "overrideExistingData", type: "checkbox" },

    ]}

    colWidths={250}

    rowHeaderWidth={150}

    height={400} // to make sure the dropdowns have room to render

    width="auto"

    afterChange={(change, source) => {

      if (source === "edit") {

        setDataTypes(dataTypesHotTable.current.hotInstance.getData());

      }

    }}

    licenseKey="non-commercial-and-evaluation" // replace with commercial license eventually

  />

</div>

);

#4

Hi @tyler.davis

Thank you for the code and details. Can you please tell me what is your expected output here? I tried to figure it out from your implementation but I’m not sure if I understand it correctly.

#5

Since the Handsontable component sits within a React component that sometimes rerenders, I’m trying to update the state for dataTypes each time a checkbox is toggled so that the Handsontable component doesn’t reset to its initial state each time a parent component re-renders.

For other Handsontable components where the data is an array I’ve been successful in using similar code to what I provided. In this particular case, instead of the getData() function returning the data in the format it’s inputted (the initial data in the useState hook in my last message) it’s returned as an array or arrays as shown in my original message (which the Handsontable component doesn’t know how to interpret).

I guess what I’m asking for is a minimum reproducible example of how to manage the state of a Handsontable component with React.

#6

Hi @tyler.davis

What would you say for the getSourceData() call instead of the getData(). This way you get the object data response. Updated demo https://jsfiddle.net/ptwmxbLd/

#7

Exactly what I was looking for, thank you!

#8

Great! I will then close this thread as solved.

#9