React Data Grid Custom Row Renderer function in Typescript

Question

I would like to convert the following RowRender() function to Typescript

const RowRenderer = ({ renderBaseRow, ...props }) => {
  const color = props.idx % 2 ? "green" : "blue";
  return <div style={{ color }}>{renderBaseRow(props)}</div>;
};

complete sample here: React Data Grid - Intercepting a row

My naive approach is

interface RowRender {
  idx: Number
};

const rowRenderer = ({ renderBaseRow, ...props }: {renderBaseRow: Function, props: RowRender}) => {
  const color = props.idx % 2 ? "green" : "blue";
  return <div style={{ color }}>{renderBaseRow(props)}</div>;
};

but vscode still not happy with props.idx

Property 'idx' does not exist on type '{ props: RowRender; }'.

How to fix that?

score 1 · Accepted Answer · answered May 06 '20 at 15:01

1

You will need to provide the typings for the RowRenderer component by declaring it as a functional component, with the required generic parameter. You may also refer to the typings over here.

interface IRowRender {
  renderBaseRow: (e: any) => void
  idx: number;
}

const rowRenderer: React.FC<IRowRender> = ({ renderBaseRow, ...props }) => {
  const color = props.idx % 2 ? "green" : "blue";
  return <div style={{ color }}>{renderBaseRow(props)}</div>;
};

answered May 06 '20 at 15:01

wentjun

40,384
10
95
107

1

thanks working :) but had to replace "renderBaseRow: (e: any) => void" with "renderBaseRow: (e: any) => ReactNode" – Chris May 06 '20 at 15:13
Ahh Yeah, makes sense, becase it returns a ReactNode. Anyways, I am not very familiar with this library, thats why I used `any` for `renderBaseRow`. You might want to look for the right typings for it! – wentjun May 06 '20 at 15:19

React Data Grid Custom Row Renderer function in Typescript

1 Answers1