Can Someone help me to convert typescript code to React Code

Question

There is a package called react-data-grid. And there is an example table on that particular package but the code is in TypeScript and also docs for this particular version are not there. I tried to convert the typescript to React. Everything was fine until I wanted to implement Drag and Drop. Some error is coming and I think that error is because I'm importing something in the wrong way. Can you tell me where I'm doing anything wrong? Here is the Sandbox link. The error in my local build is coming on RowRender.js in line number 44. I also included the typescript file there. You can also see the error if you just uncomment the line 72-74 of App.js component in sandbox.

Answer 1

• Rename .ts file to .tsx file. In another case TypeScript will not understand <div> <Row> and other react elements
• Update your imports regarding react-data-grid to: import { Row, RowRendererProps } from "react-data-grid";
• Update your import import { useCombinedRefs } from ... to fetch hook from correct place.
• If you will see error regarding default import for React - change import React from 'react' to import * as React from "react"; or update tsconfig to support synthetic imports

useCombinedRefs - is internal function that is not exported, so you can't use it directly. Option #1 - write it yourself. Option #2 find the reason why you are trying to use internal function. Should be the better way.

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);
}