import * as React from 'react';
import { List, ListItemButton, ListItemIcon, ListItemText, ListItem} from '@mui/material';
import LightbulbOutlinedIcon from '@mui/icons-material/LightbulbOutlined';
import NotificationsNoneOutlinedIcon from '@mui/icons-material/NotificationsNoneOutlined';
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';


const mainListItems = () => {
    const navList = [
        { id: 1, name: 'Notes', icon: <LightbulbOutlinedIcon />},
        { id: 2, name: 'Reminders', icon:  <NotificationsNoneOutlinedIcon /> },
        { id: 3, name: 'Bin', icon: <DeleteOutlinedIcon /> },
    ]

    return (
            <List>
                {
                    navList.map( list => (
                        <ListItem key={list.id} disablePadding sx={{display: 'block'}}>
                            <ListItemButton sx={{minHeight: 48, justifyContent: open ? 'initial' : 'center', px: 2.5}}>
                                <ListItemIcon sx={{minWidth: 0, mr: open ? 3 : 'auto', justifyContent: 'center'}}>
                                    {list.icon}
                                </ListItemIcon>
                                <ListItemText primary={list.name} sx={{opacity: open ? 1 : 0}}/>
                            </ListItemButton>
                        </ListItem>
                    ))
                }
            </List>
    )
}

I tried reducing the amount of code by using map to assign icon information. But it shows this error and I can't understand why it happens. Should I assign types to the attributes in the list?

line where error occurs :

navList.map( list => (

Full error message :

Type unknown[] is not assignable to type React.ReactNode ...   Type unknown[] is not assignable to type ReactElement<any, string | JSXElementConstructor> | string | number | Iterable | ReactPortal | boolean     Type unknown[] is not assignable to type boolean

import * as React from 'react';
import { List, ListItemButton, ListItemIcon, ListItemText, ListItem} from '@mui/material';
import LightbulbOutlinedIcon from '@mui/icons-material/LightbulbOutlined';
import NotificationsNoneOutlinedIcon from '@mui/icons-material/NotificationsNoneOutlined';
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';


const mainListItems = () => {
    const navList = [
        { id: 1, name: 'Notes', icon: <LightbulbOutlinedIcon />},
        { id: 2, name: 'Reminders', icon:  <NotificationsNoneOutlinedIcon /> },
        { id: 3, name: 'Bin', icon: <DeleteOutlinedIcon /> },
    ]

    return (
            <List>
                {
                    navList.map( list => (
                        <ListItem key={list.id} disablePadding sx={{display: 'block'}}>
                            <ListItemButton sx={{minHeight: 48, justifyContent: open ? 'initial' : 'center', px: 2.5}}>
                                <ListItemIcon sx={{minWidth: 0, mr: open ? 3 : 'auto', justifyContent: 'center'}}>
                                    {list.icon}
                                </ListItemIcon>
                                <ListItemText primary={list.name} sx={{opacity: open ? 1 : 0}}/>
                            </ListItemButton>
                        </ListItem>
                    ))
                }
            </List>
    )
}

I tried reducing the amount of code by using map to assign icon information. But it shows this error and I can't understand why it happens. Should I assign types to the attributes in the list?

line where error occurs :

navList.map( list => (

Full error message :

Type unknown[] is not assignable to type React.ReactNode ...   Type unknown[] is not assignable to type ReactElement<any, string | JSXElementConstructor> | string | number | Iterable | ReactPortal | boolean     Type unknown[] is not assignable to type boolean

• javascript
• reactjs
• jsx
• vite

• does your file has the correct extension? (.jsx or .tsx). Also maybe it can be a cache issue, restart your dev server to make sure it's not ing from that. I don't see any issues concerning the error you are receiving. – mlegrix Commented Nov 7, 2022 at 6:07
• is navList a state variable? – nullptr Commented Nov 7, 2022 at 9:05
• Please take the tour. Solutions should be posted as answers below. Don't forget to accept it to resolve this post. Or delete the post. – isherwood Commented Dec 28, 2022 at 16:39
• Component name is not a factor in my case. I don't consider that a general solution. – isherwood Commented Feb 16, 2023 at 17:32
• I tested your code and it does not give any typescript warning or any kind of error and it renders – Yilmaz Commented Feb 21, 2023 at 2:40

4 Answers 4

1. You need to define a type for your NavItems. Then set the navList to be of type NavItems Array. const navList: NavItem[].
2. There is the issue of convention as earlier mentioned; React treats lowercase JSX as React Elements. e.g <div>,<section>, etc. These are the HTML tags look-alikes that e preloaded with react. So whenever React sees a lowercase JSX <mainListItems> in this case, It will attempt to read it as an intrinsic element and fail. THIS IS WHY IT IS IMPORTANT TO FOLLOW THE CONVENTION OF USING the <MainListItems/> naming style for your <Components/>
3. Sandbox demo

type NavItem = {
  id: number;
  name: string;
  icon: JSX.Element;
};
const MainListItems = () => {
  const navList: NavItem[] = [
    { id: 1, name: "Notes", icon: <LightbulbOutlinedIcon /> },
    { id: 2, name: "Reminders", icon: <NotificationsNoneOutlinedIcon /> },
    { id: 3, name: "Bin", icon: <DeleteOutlinedIcon /> }
  ];

  return (
    <List>
      {navList.map((list) => (
        <ListItem key={list.id} disablePadding sx={{ display: "block" }}>
          <ListItemButton
            sx={{
              minHeight: 48,
              justifyContent: open ? "initial" : "center",
              px: 2.5
            }}
          >
            <ListItemIcon
              sx={{
                minWidth: 0,
                mr: open ? 3 : "auto",
                justifyContent: "center"
              }}
            >
              {list.icon}
            </ListItemIcon>
            <ListItemText primary={list.name} sx={{ opacity: open ? 1 : 0 }} />
          </ListItemButton>
        </ListItem>
      ))}
    </List>
  );
};

This code runs fine given that there's no problems with any of the imports. The only thing wrong here is that mainListItemsshould be MainListItems as all React ponents should have names starting with uppercase letters.

The error is occurring because TypeScript cannot infer the return type of the map() function, which is an array of unknown type. To resolve this, you can explicitly type the return type of map() by using the ReactNode[] type:

navList.map((list): React.ReactNode => (
  // ...
))

This tells TypeScript that the map() function will return an array of React nodes, which is what is expected by the List ponent.

React, namely JSX cares about the casing of the ponent names. Every ponent must start with an upper-cased letter. That is because JSX will not recognize it as a React ponent otherwise, but rather as a JSX element (i.e. h1, div, p etc.).

I should also note the importing scheme. Do not import using import * as React from 'react' unless you are sure that that is what you want to do. For 99% of cases, you should import as such:

import React, {FC, Fragment, ... other imports ...} from "react"

The difference is that the former imports every exportable from the module, whereas the latter imports only the specified exportables.

Next, there is no mention of TypeScript but this error seems to be a TypeScript error to me, so go ahead and assign a type to newList.

I tested this on fiddle and it worked fine, go ahead and try it on your end please.

const MainListItems = () => {
    const navList:Array<{ id: number, name: string, icon: JSX.Element }> = [
        { id: 1, name: 'Notes', icon: <LightbulbOutlinedIcon />},
        { id: 2, name: 'Reminders', icon:  <NotificationsNoneOutlinedIcon /> },
        { id: 3, name: 'Bin', icon: <DeleteOutlinedIcon /> },
    ]

    return (
            <List>
                {
                    navList.map( list => (
                        <ListItem key={list.id} disablePadding sx={{display: 'block'}}>
                            <ListItemButton sx={{minHeight: 48, justifyContent: open ? 'initial' : 'center', px: 2.5}}>
                                <ListItemIcon sx={{minWidth: 0, mr: open ? 3 : 'auto', justifyContent: 'center'}}>
                                    {list.icon}
                                </ListItemIcon>
                                <ListItemText primary={list.name} sx={{opacity: open ? 1 : 0}}/>
                            </ListItemButton>
                        </ListItem>
                    ))
                }
            </List>
    )
}

This is because TypeScript strict mode will not allow attempts to render things that JSX doesn't understand. It must be a React ponent, JSX element, string, character, number etc. You can use ReactNode type insted of JSX.Element as well, because JSX.Element is a subset of ReactNode.