React HandsOnTable Not Redrawing

Tags: #<Tag:0x00007f8b1cc34cf0>
#1

I currently am trying out the Handsontable react plugin. However I cannot get the table to rerender when the state changes the data thats in the table.

const [communities, setCommunities] = React.useState({
        data: [],
        licenseKey: "non-commercial-and-evaluation",
        colHeaders: true,
        rowHeaders: true,
        width: "100%",
        height: "300", 
    });

const useComponentDidMount = func => useEffect(func, []);
    useComponentDidMount(() => fetchData())

const fetchData = () => {
        fetch('http://localhost:8080/v1/graphql', {
            method: "POST",
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                query: `query { communities {id budget_neighborhood_id division_id code name city state county city_of_clerk is_active} }`,
            }),
        }).then(response => {
            return response.json()
        }).then(responseAsJson => {
          let updatedCommunities = {...communities};
            updatedCommunities.data = responseAsJson.data.communities;
            setCommunities(updatedCommunities);
        });
    }

console.log(communities); 
    return (
        <div>
            <HotTable id="hot" settings={communities} />
        </div>
    );

When I load the page it shows a table with just the rows headers listed 1, 2 and wont load the changes to the state for data. I looked in the console log and the initial data set is none, then it gets 2 rows with data however only the two rows are displayed and no data. When I click a button on the page to display something else it will rerender the table as expected to show all the data. Why is the state changes not populating to the tables?

#2

Hey @abeyer

here’s an example with the React for Handsontable
https://jsfiddle.net/h0q86m1y/

if that won’t help you to check what is wrong please pack the code into StackBlitz and I will debug it.

#3

I would create it in the StackBlitz website but all I get is the following error:

Error in /turbo_modules/handsontable@7.3.0/dist/handsontable.full.min.js (34:457886)

Cannot convert object to primitive value

I even copied the example you have into the project and still get that error.

But I think your misunderstanding my issue. The initial default state is fine on the first render, however when I have the equivalent componentWillMount() function to fetch new data and update the state. This does not force the handsontable to refresh it’s view it just sits with the old information.

I have a code demo on the site however I cannot test it due to the error described above. It seems to only be native to that coding website. Let me know what else you need from me. The code in that link may have a few small errors I just cannot test it in the browser.

#4

Hi @abeyer

I slightly changed your demo from StackBlitz.
Can you work on this - https://codesandbox.io/s/fetch-data-y0jlf - in order that better reflect your issue?

#5

Thank you for fixing that. However it is displaying my issue as is. I added a console.log of the state. As you can see the initial render has no data so the table doesnt display anything and on componentWillMount it adds a few rows of data however the handsontable doesnt display the information.

It also seems to me since I have the console log that when a new state is passed the component is unmounted and remounted since it is calling the componentDidMount function twice.

#6

Handsontable doesn’t display the new data because we must do it by myself - e.g. by updateSettings.

Here is an updated demo - https://codesandbox.io/s/fetch-data-l3fiw

#7

So what you’re saying is we shouldn’t use state to control the component? It doesn’t make sense that you set the state but then have to manually call a table render with the fetch data and not even use the state. This defeats the purpose of React by creating repeating datasets.

#8

I’m sorry I haven’t answered for so long.

Yes, you could use setState to control the component without updateSettings - https://codesandbox.io/s/fetch-data-o4qe9

But you have to remember to operate on the same type of data. When initializing data as an array of arrays you could operate only on an array of arrays, not array of objects. And vice versa, when you start an array of objects you must fetch an array of objects - https://codesandbox.io/s/fetch-data-4jsyr
This is our limitation of updateSettings. updateSettings we use to update components changes.

#9