CODEWITHSUNDEEP
reactjsmaterial-ui
Raheel
Raheel

Reputation: 9024

Element type is invalid React

import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import { InsertDriveFileOutlinedIcon } from '@material-ui/icons/InsertDriveFileOutlined';

<Grid item>
  <List>
    {policiesProcedures.map((doc, index) => (
      <ListItem button key={index}>
        <ListItemIcon>
          <InsertDriveFileOutlinedIcon />
        </ListItemIcon>
        <ListItemText primary={doc.name} />
      </ListItem>
    ))}
  </List>
</Grid>;

This code is giving me error of

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

If I change it from List to something else like

or it works fine.

Any clue what is happening wrong here ?

Thanks

Upvotes: 2

Views: 355

Answers (1)

lakerskill
lakerskill

Reputation: 1079

I suspect you have the wrong import statement. If this is the default export than you export should look like

import InsertDriveFileOutlinedIcon  from '../containers/InsertDriveFileOutlinedIcon'

However, if it's not the default export, you should destructure it.

import {InsertDriveFileOutlinedIcon}  from '../containers/InsertDriveFileOutlinedIcon'

Upvotes: 3

Related Questions