ReactJS mui/material Topography value error

Question

interface CardTableRowInterface {
  key: string;
  label?: string;
  value?: (data: any) => React.ReactElement;
  children: React.ReactNode;
}

export interface CardTableProps extends CardTableStyleProps {
  data: Record<string, unknown>;
  rows: Array<CardTableRowInterface | string>;
  size?: "large" | "medium";
  disableBlankRows?: boolean;
  CardHeaderProps?: CardHeaderProps;
}

const CardTable: React.FC<CardTableProps> = (props) => {
  const { data, rows, size = "medium", disableBlankRows, ...rest } = props;
  const isLarge = size === "large";
  return (
    <StyledTable {...rest}>
      <TableBody>
        {rows.map((row) => {
          const key = typeof row === "object" ? row.key : row;
          const label =
            typeof row === "object"
              ? getLabelFromKey(row.label || key)
              : getLabelFromKey(row);
          const value =
            typeof row === "object" && typeof row.value === "function"
              ? row.value(data)
              : get(data, key);

          if (!value && disableBlankRows) return;

          return (
            <TableRow key={key}>
              <TableCell className={classes.tableColumnHeaderCell}>
                <Typography variant={isLarge ? "h5" : "h6"}>{label}</Typography>
              </TableCell>

              <TableCell>
                <Typography variant="body2" color="textSecondary">
                  {value}
                </Typography>
              </TableCell>
            </TableRow>
          );
        })}
      </TableBody>
    </StyledTable>
  );
};

Error:

Type error: No overload matches this call.
  Overload 1 of 2, '(props: { component: ElementType<any>; } & SystemProps<Theme> & { align?: "left" | "center" | "right" | "inherit" | "justify"; children?: ReactNode; ... 6 more ...; variantMapping?: Partial<...>; } & CommonProps & Omit<...>): Element', gave the following error.
    Type 'unknown' is not assignable to type 'ReactNode'.
  Overload 2 of 2, '(props: DefaultComponentProps<TypographyTypeMap<{}, "span">>): Element', gave the following error.
    Type 'unknown' is not assignable to type 'ReactNode'.

  81 |               <TableCell>
  82 |                 <Typography variant="body2" color="textSecondary">
> 83 |                   {value}
     |                   ^
  84 |                 </Typography>
  85 |               </TableCell>
  86 |             </TableRow>

score -1 · Answer 1 · answered Aug 24 '22 at 08:43

-1

The value should be string type or resolvable value. It should not be an object or array type to pass to react node. You can console log the value and check the type of value.

answered Aug 24 '22 at 08:43

Abasaheb Gaware

509
4
13

I can't even build. How to `console.log`? – Kok How Teh Aug 24 '22 at 08:54
before return statement write `console.log(value);` like below: `if (!value && disableBlankRows) return; console.log(value); return (` – Abasaheb Gaware Aug 24 '22 at 09:58
How does that help a build time error? – Kok How Teh Aug 24 '22 at 11:08
to check the value held by the `value` variable, you need to console that `value` variable. so only for console, you can remove your return statement HTML/JSX code which has the error while building. – Abasaheb Gaware Aug 24 '22 at 12:17

ReactJS mui/material Topography value error

1 Answers1