updateValue in customBodyRender doesn't work when used with useState

[jaekunchoi]

updateValue in customBodyRender doesn't update value when setting values via useState.

Expected Behavior

updateValue updates the row properly when used with useState

Current Behavior

updateValue doesn't update value and the row is not changed in customBodyRender

Steps to Reproduce (for bugs)

Below is an example to highlight the problem. I did not put entire code as they are just distractions for now.

customBodyRender: (value, tableMeta, updateValue) => {
    const handleSearch = () => {
            const monthlySearches = tableMeta.rowData[1];
            setIsEvaluating(true);
            setClickedRowIndex(tableMeta.rowIndex);
            updateValue(true);
            setTest('hello');
            ApiClient.get(`/test`, { params: { historicalVolume: monthlySearches } })
              .then(res => {
                updateValue(res.history);
                setSearches(searches);
              })
              .catch(err => {
                updateValue(null)
                if (err.status === 422) {
                  setErrorMsg(`${err.data}`);
                  setAlertSeverity('error');
                  setOpenErrorMsg(true);
                }
              })
              .finally(() => {
                setIsEvaluating(false);
              });
          };

          return (
            <Tooltip title={tooltip}>
              <div className={classes.root}>
                <div className={classes.wrapper}>
                  { Number.isInteger(value) ? 
                    <IconButton aria-label="evaluate" variant="contained" size="small" onClick={handleSearch} disabled={isEvaluating===true}>
                      <Chip size="small" className={difficultyClassname} label={value} />
                    </IconButton> 
                    :
                    <IconButton aria-label="evaluate" variant="contained" size="small" onClick={handleSearch} disabled={isEvaluating===true}>
                      <SearchIcon color="primary" />
                    </IconButton> 
                  }
                  { tableMeta.rowIndex === clickedRowIndex && isEvaluating && <CircularProgress size={32} className={classes.buttonProgress} /> }
                </div>
              </div>
            </Tooltip>
          )
}

Is it possible to mix both and still use updateValue under customBodyRender?

[hasanbisha]

why do you need to update some state and make an api call while the datatable cell is being painted? can you give some extra details?

[jaekunchoi]

It needs to be able to call api when the cell is clicked and update the clicked cell with api response data

[hasanbisha]

yes you can use it, does it throw any error?

[patorjk]

I could investigate further but I'd need a codesandbox showing the issue.

[anudeepjusanu]

Any update about it we are also facing the same issue, The state is not getting updated when used with updateValue original state persists and not sure of how to fetch the updated data of the table

[Instrumedley]

yeah, facing the same issue here. It's kinda of a deal breaker for what I need to achieve right now

[beyerenrico]

Are there any updates on this issue?