TypeScript error: (component with MUI style) cannot be used as a JSX element

user_13609691 0
Viewed 1572

I don't understand what I'm doing wrong. I'm trying to add a child component to the main page. I'm deducing it has something to do with MUI style applied at the end. I stripped off all the irrelevant code and I'm still facing this error. Is this not the correct way to implement withStyles?

I'm trying to put a table in a separate component and handle all data management there. The component than would be rendered on the main page. I'm using React 16.13.1, material-ui 4.12.4, @types/react 16.9.56, typescript 4.0.2

DataTable.tsx

import React, { FC } from 'react';
import { createStyles, Theme, WithStyles } from "@material-ui/core/styles";
import Table from '@material-ui/core/Table'
import Paper from "@material-ui/core/Paper";
import withStyles from "@material-ui/core/styles/withStyles";

interface TableProps {
    data: any;
    mode: string;
    parent: any;
}

const styles = (theme: Theme) =>
    createStyles({
        root: {
            width: "100%"
            // marginTop: theme.spacing(3),
        },
    })

type CombinedProps = TableProps & WithStyles<typeof styles>;


const DataTable: FC<CombinedProps> = (props: CombinedProps) => {

    return (
        <>
            <div>
                <Paper style={{ overflow: "auto", height: "100%" }}>
                    <Table>
                        {/* TODO */}
                    </Table>
                </Paper>
            </div>
        </>
    );
}

export default withStyles(styles)(DataTable);

MainPage.tsx

import React, { FC } from 'react';
import DataTable from './DataTable';

export const MainPage: FC = () => {
    let analysis = {'data': 0};

    return (
        <>
            {analysis ?
                <div>
                    <DataTable data={analysis} mode={"comp_count"} parent={this}/>
                </div>
                : 
                <div />
            }
        </>
    );
};

The error I'm getting:

'DataTable' cannot be used as a JSX component.
  Its element type 'ReactElement<any, any> | Component<Pick<TableProps & { classes: ClassNameMap<"root">; } & { children?: ReactNode; }, keyof TableProps | "children"> & StyledComponentProps<...>, any, any> | null' is not a valid JSX element.
    Type 'Component<Pick<TableProps & { classes: ClassNameMap<"root">; } & { children?: ReactNode; }, keyof TableProps | "children"> & StyledComponentProps<...>, any, any>' is not assignable to type 'Element | ElementClass | null'.
      Type 'Component<Pick<TableProps & { classes: ClassNameMap<"root">; } & { children?: ReactNode; }, keyof TableProps | "children"> & StyledComponentProps<...>, any, any>' is not assignable to type 'ElementClass'.
        The types returned by 'render()' are incompatible between these types.
          Type 'React.ReactNode' is not assignable to type 'import("/home/username/Git/projectname/frontend/node_modules/@types/react-router/node_modules/@types/react/index").ReactNode'.
            Type '{}' is not assignable to type 'ReactNode'.  TS2786
material-ui typescript reactjs
1 Answers

Found a solution:

Ditch withStyles and use makeStyles instead.

interface DataTableProps {
  data: any;
  mode: string;
  parent: any;
}

const useStyles = makeStyles({
  root: {
    width: "100%"
  },
})

const DataTable: FC<DataTableProps> = (props: DataTableProps) => {
  const classes = useStyles();
  return (
    <>
      <div className={classes.root}>
        {/* more code */}
      </div>
    </>);}

export default DataTable;
user_136096910
Related