In Typescript, what should the return type be for a component returning MUI TableContainer?-CodePudding

My component is returning a MUI Table, wrapped inside TableContainer

const DataReleaseChart = (): React.FC<?> => {
  return (
    <TableContainer
      sx={{
        display: 'grid',
        rowGap: 7,
      }}
    >
      <Table>{chartRenderer(preCloseRowData)}</Table>
      <Table>{chartRenderer(closedRowData)}</Table>
    </TableContainer>
  );
};

export default DataReleaseChart;

What should be the returned Type?

I have tried ReactElement[] but it gives the error of

Type 'Element' is missing the following properties from type 'ReactElement<any, string | JSXElementConstructor<any>>[]': length, pop, push, concat, and 29 more.ts(2740)

I have also tried React.FC but got this

Type 'Element' is not assignable to type 'FC<{}>'.
  Type 'Element' provides no match for the signature '(props: { children?: ReactNode; }, context?: any): ReactElement<any, any>'.ts(2322)

CodePudding user response：

**You can use ReactNode and make sure when declare function then you have to put :FC **

import React, { FC, ReactNode } from "react";   
    
 const DataReleaseChart:FC<ReactNode> = () => {
  return (
    <TableContainer
      sx={{
        display: 'grid',
        rowGap: 7,
      }}
    >
      <Table>{chartRenderer(preCloseRowData)}</Table>
      <Table>{chartRenderer(closedRowData)}</Table>
    </TableContainer>
  );
};

export default DataReleaseChart;