Error on implementing react-data-grid 7.0.0 from TS to React

Question

I'm trying to implement DnD functionality in react-data-grid, but I'm getting "TypeError: Object(...) is not a function" Error.

There is a same file in TypeSript that I provided in the sandbox(it is only for reference). I'm trying to implement the functionality in React and something is wrong when converting TS code to React code. I'm using react-data-grid ^7.0.0-canary.33.

                    <DndProvider backend={HTML5Backend}>
                      <DataGrid
                        rowRenderer={p => <DraggableRowRenderer {...p} onRowReorder={onRowReorder} />}                  
                      />
                    </DndProvider>
// this is the component where the error is. I think I'm doing something wrong when typing react code(the orignal implementation is in TS)

import { useDrag, useDrop } from 'react-dnd';
import { Row } from 'react-data-grid';
import useCombinedRefs from 'react-data-grid';
// import { row } from 'react-dnd'
import clsx from 'clsx';
import './DraggableRowRenderer.less';

export default function DraggableRowRenderer({
  rowIdx,
  isRowSelected,
  className,
  onRowReorder,
  ...props}) {
  const [{ isDragging }, drag] = useDrag({
    item: { index: rowIdx, type: 'ROW_DRAG' },
    collect: monitor => ({
      isDragging: monitor.isDragging()
    })
  });

  const [{ isOver }, drop] = useDrop({
    accept: 'ROW_DRAG',
    drop({ index, type }) {
      if (type === 'ROW_DRAG') {
        onRowReorder(index, rowIdx);
      }
    },
    collect: monitor => ({
      isOver: monitor.isOver(),
      canDrop: monitor.canDrop()
    })
  });

  className = clsx(
    className,
    {
      'rdg-row-dragging': isDragging,
      'rdg-row-over': isOver
    }
  );

  return (
    <Row
      ref={useCombinedRefs(drag, drop)}
      rowIdx={rowIdx}
      isRowSelected={isRowSelected}
      className={className}
      {...props}
    />
  );
}

@Cedervall The error is coming on last 5 line(ref = {us...}). — Yash, Jan 08 '21 at 10:03
@Cedervall Here is sanbox link. https://codesandbox.io/s/rdg-row-reorder-700-canary33-ed0mu I also included typescript file, which I'm converting from. — Yash, Jan 08 '21 at 10:45
@YashJaiswal How do you replicate the error in your codesandbox? — juliomalves, Jan 08 '21 at 14:26
@juliomalves Go to [sanbox](https://codesandbox.io/s/rdg-row-reorder-700-canary33-ed0mu?file=/src/App.js), uncomment line 72-74 in App.js. — Yash, Jan 08 '21 at 15:25
The error happens because `useCombinedRefs` function is not in `react-data-grid` default export. It's not even being exposed by that library, and only used internally. — juliomalves, Jan 08 '21 at 15:50
Hey @juliomalves. Thanks for the help. And yes I've got what the issue was and now I'm using that internal function directly. Will update the post. — Yash, Jan 09 '21 at 05:29

score 0 · Accepted Answer · answered Jan 09 '21 at 05:35

I've got what the issue was. UseCombinedRef was not exported from the library. So what I did is I'm copying the internal function in my file. function useCombinedRefs(...refs) { return useCallback(handle => { for (const ref of refs) { if (typeof ref === 'function') { ref(handle); } else if (ref !== null) { ref.current = handle; } } }, refs); }

Just paste this function instead of importing it and you will be good to go. Thanks to @drag13 for solving this issue. Duplicate issue here. Sandbox link here. Library Issue link here.

Error on implementing react-data-grid 7.0.0 from TS to React

1 Answers1