Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
douglasg14b opened this issue Apr 24, 2022 · 2 comments
Open

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

douglasg14b opened this issue Apr 24, 2022 · 2 comments

Comments

@douglasg14b
Copy link

douglasg14b commented Apr 24, 2022

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>
	)
})
@douglasg14b douglasg14b changed the title Cannot use FlipMove "No overload matches this call." despite child components using forwardRef Cannot use FlipMove "No overload matches this call." Apr 24, 2022
@douglasg14b
Copy link
Author

This can be resolved by adding children?: React.ReactNode; to FlipMoveProps. I guess it not defining children as a prop means it doesn't accept children?

@xcv58
Copy link
Collaborator

xcv58 commented Apr 25, 2022

I think @nickjs already added it:
#268

But we need to figure out how to publish a new version #233 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants