Skip to content

Cannot use FlipMove "No overload matches this call." #269

@douglasg14b

Description

@douglasg14b

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>
	)
})

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions