-
Notifications
You must be signed in to change notification settings - Fork 256
Description
I'm using React 18.
This is a type error, but if forced to output it actually works just fine. So this component is requiring something that's too narrow? This even occures is I just use a div under it...
Full Error:
TS2769: No overload matches this call.
Overload 1 of 2, '(props: FlipMoveProps | Readonly): FlipMove', gave the following error.
Type '{ children: Element[]; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'.
Overload 2 of 2, '(props: FlipMoveProps, context: any): FlipMove', gave the following error.
Type '{ children: Element[]; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'.
Simple use that produces this error:
<FlipMove>
<div></div>
</FlipMove>
Used like:
<FlipMove>
{songs.map((song) => (
<PlaylistSongCard playlist={playlist} song={song} key={song.trackId} />
))}
</FlipMove>
PlaylistSongCard:
export const PlaylistSongCard = forwardRef(({ playlist, song, style }: Props, ref) => {
const isInPlaylist = useIsSongInPlaylist(song.trackId)
return (
<Box ref={ref}>
<Card elevation={3} className={isInPlaylist ? styles['is-in-playlist'] : ''} style={style}>
<CardContent sx={{ py: 2, pb: 0, position: 'relative' }} className={styles['pad-bottom']}>
<SongCardActionButtons song={song} isInPlaylist={isInPlaylist} />
<Grid container sx={{ flexWrap: 'nowrap' }}>
<Grid item xs='auto' sx={{ ml: -2, mr: 1, my: -2, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
<PlaylistSongCardArrows playlist={playlist} song={song} />
</Grid>
<Grid item xs='auto' sx={{ display: 'flex', flexGrow: 1, flexShrink: 1, minWidth: 0 }}> {/* https://stackoverflow.com/a/43809765 for minWidth thing */}
<Grid item xs={12}>
<SongCardBody song={song} />
</Grid>
</Grid>
</Grid>
</CardContent>
</Card>
</Box>
)
})