Access data from props to render basic table with React, Typescript, Axios, hooks, Material.ui basic table structure

Question

I'm learning a few different things at once, so I'm having trouble understanding the issue I'm up against.

I have made the basic template structure work with some dummy data, and my API call has been working.

Based on the error message, I know I am likely making a mistake because my interface is improperly defined or I am misunderstanding it.

Here's my code:

interface IAssets {
  items: Array<{
    id: string,
    name: string,
    // metadata: {},
    tags: Array<{
      id: string,
      name: string
    }>,
    type: string,
    s3URL: string,
    createdAt: number,
    updatedAt: number
  }>,
  totalCount: number
}

const BasicTable = (assets: IAssets) => {

  const classes = useStyles();

  return (
    <TableContainer component={Paper}>
      <Table className={classes.table} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>Asset Name</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {assets.items.map((item: any) => (
            <TableRow key={item.id}>
              <TableCell component="th" scope="row">
                {item.name}
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

const App = () => {

  const [data, setData] = useState({});

  const getAssets = async () => {

    console.log("logging that getAssets ran!")

    const response = await axios(
      'https://someURL',
    );
    setData(response.data)
    console.log(data)
  }

  useEffect(() => {
    getAssets();
    console.log("logging useEffect ran")
  }, []);

  return (


    <Container maxWidth={false}>
      <BasicTable assets={data} />
    </Container>

  );

}
export default App;

And here's the shape of the response data

{
    "items": [
        {
            "id": "blah",
            "name": "blah",
            "metadata": {},
            "tags": [
                {
                    "id": "869dd0a8-dbe8-46fd-bb3a-1cf1689f6d0e",
                    "name": "blah"
                },
                {
                    "id": "b3277cda-065f-4cd7-a7dc-e49980bb190d",
                    "name": "blah"
                }
            ],
            "type": "blah",
            "s3URL": "someURL",
            "createdAt": 1626822949412,
            "updatedAt": 1626822949412
        } 
    ],
    "totalCount": 1
}

As well as the error message associated with assets

Type '{ assets: {}; }' is not assignable to type 'IntrinsicAttributes & IAssets'.
  Property 'assets' does not exist on type 'IntrinsicAttributes & IAssets'.ts(2322)

Unfortunately, the error message is proving to be a tough clue for my attempts to fix...

I have tried type assignment/interface definitions for smaller or larger units of data (object of assets, individual assets), as well as changing adding {} to the argument passed to BasicTable, but I'm hoping to avoid going deeper into whack-a-mole debugging...

Thanks for your help!

Answer 1

You TS error comes from here: const BasicTable = (assets: IAssets) => {}

By declaring your props (assets) type directly to the function's params itself does not help typescript to tell the actual type of the component props.

What you should do is to put your type inside the generic type params of your component like this:

import React, { FunctionComponent } from "react";

const BasicTable: FunctionalComponent<IAssets> = (assets) => {}

So it will sastified props type of the component as can be seen in type definition here:

interface FunctionComponent<P = {}> {
    (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
    propTypes?: WeakValidationMap<P>;
    contextTypes?: ValidationMap<any>;
    defaultProps?: Partial<P>;
    displayName?: string;
}