Typescript React/ styled-components - passing function as prop to component throws error on missing type

Question

I'm getting an error of overload match but I didn't understand because isn't getting this error yesterday error in this happens too when I try to add another onClick function in another component or order page

image of error

code;

import React, { MouseEventHandler } from 'react'

import { Container, Image } from './styles'

interface ImageFullscreen {
  path?: string
  shown: boolean
  close: MouseEventHandler
}

const ImageFullscreen: React.FC<ImageFullscreen> = ({
  path = 'https://via.placeholder.com/1920x1080?text=Imagem+Placeholder+Das+Postagens',
  close,
  shown,
}) => {
  const handleMapViewClose: MouseEventHandler<HTMLDivElement> = e => {
    const source = (e.target as HTMLDivElement & HTMLImageElement).src
    if (source === undefined) {
      close(e)
    }
  }

  return (
    <Container display={shown} onClick={handleMapViewClose}>
      <Image src={path} alt='ImageFullscreen' />
    </Container>
  )
}

export default ImageFullscreen

code of container

import styled from 'styled-components'
import { fadeIn } from 'styles/keyframes'

interface Container {
  display: boolean
}

export const Container = styled.div<Container>`
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  top: 0;
  left: 0;
  z-index: 1000;
  display: ${props => (props.display ? 'flex' : 'none')};
  align-items: center;
  justify-content: center;
  padding: 50px;
  animation: ${fadeIn} 500ms 1;
`

export const Image = styled.img`
  max-height: 100%;
  max-width: 100%;
  min-height: 600px;
`

could you provide us the code of this container? maybe is the way that you are creating the style-component thanks — Kappys
– Kappys, Commented Nov 17, 2021 at 10:52

Kappys · Accepted Answer · 2021-11-17 11:42:56Z

2

I think you have a problem in the name of your interface, it's the same of your Component, maybe you can change the name and it will works.

something like this:

interface IContainer {
  display: boolean
}
export const Container = styled.div<IContainer>`...`

answered Nov 17, 2021 at 11:42

Kappys

7032 gold badges7 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mila A Over a year ago

That might be true! Lucas's styled component 'Container' is named the same as the interface 'Container'

Mila A · Accepted Answer · 2021-11-17 11:47:33Z

0

Lucas, if you try

const handleMapViewClose = ( e : React.MouseEvent<HTMLDivElement> ) => {
    const source = (e.target as HTMLDivElement & HTMLImageElement).src
    if (source === undefined) {
      close(e)
    }
  }

Does it work?

I think you misspelled the event iterface name maybe?

answered Nov 17, 2021 at 11:47

Mila A

5811 gold badge4 silver badges14 bronze badges

Collectives™ on Stack Overflow

Typescript React/ styled-components - passing function as prop to component throws error on missing type

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related