Failed prop type: Invalid prop children of type array supplied to ForwardRef(ListItemIcon), expected a single ReactElement.

[ask2mahtab]

Failed prop type: Invalid prop children of type array supplied to ForwardRef(ListItemIcon), expected a single ReactElement.

<ListItem style={{"marginTop":"-16px","marginBottom": "-7px"}} button key={i+"i"} >
<ListItemIcon key={i+ subOption.text+'d' } className={classes.menuPosition}><span key={ subOption.text+1+i+1 } className={subOption.icon}/>
<ListItemText style={{marginBottom:'-5px',marginTop:'-8px', padding:'0px 16px'}} key={i+ subOption.text+'e'} primary={ subOption.text }
className="menu-text-Color"
/>

[eps1lon]

It looks like you're passing a span and ListItemText as children to ListItemIcon. You can only pass a single ReactElement as the warning indicates.

[nagad814]

My code <ListItemIcon> <HomeIcon className={classes.icon}/> </ListItemIcon> showed the same error. When i remove the white space and moved to new line i was able to remove the error

[sharique-asghar]

Removing white space around the <HomeIcon>inside <ListItemIcon> will also work.

<ListItemIcon><HomeIcon /></ListItemIcon>

[iagokrt]

i just have the same error, wrapping all inside a fragment (</>) resolved:

<ActionButton>
   <>
      <OtherComponentButton />
      <OtherComponentButton />
    </>
</ActionButton>

[oliviertassinari]

@iagokrt Looking at the source of ListItemIcon.js, this constraint is no longer required, it seems that we can loosen it. Do you want to submit a pull request? :)

diff --git a/packages/material-ui/src/ListItemIcon/ListItemIcon.d.ts b/packages/material-ui/src/ListItemIcon/ListItemIcon.d.ts
index 029ca35a3..16fb588e5 100644
--- a/packages/material-ui/src/ListItemIcon/ListItemIcon.d.ts
+++ b/packages/material-ui/src/ListItemIcon/ListItemIcon.d.ts
@@ -6,7 +6,7 @@ export interface ListItemIconProps
    * The content of the component, normally `Icon`, `SvgIcon`,
    * or a `@material-ui/icons` SVG icon element.
    */
-  children: React.ReactElement;
+  children: React.ReactNode;
 }

 export type ListItemIconClassKey = 'root';

[alielkhateeb]

@oliviertassinari Hi, I'm creating a pull request for this, but somehow changing the definition to children: React.ReactNode and running yarn proptypes generates children: PropTypes.node in ListItemIcon.js without .isRequired

Sorry, but what am I missing here? and how was it marked required before when it was ReactElement?

[eps1lon]

Sorry, but what am I missing here? and how was it marked required before when it was ReactElement?

Don't worry about. ReactNode includes undefined which is why it isn't marked as required anymore.

[oliviertassinari]

So we are referring to this case:

https://github.com/mui-org/material-ui/blob/b17e6856c33e96e1b6c5c5dfac327127cf4be705/packages/material-ui/src/Tooltip/Tooltip.d.ts#L99

What about

children?: React.ReactNode;

instead?

[alielkhateeb]

So is it ok to change the prop children to optional in ListItemIcon?

[oliviertassinari]

@ask2mahtab I think so, it would match with #20458.

[dheereshagrwal]

In my case, I was passing a boolean value to my Modal component whereas it was undefined so, it made children component invalid