Unable to pass props from parent components to child

Question

I'm passing props from parents to child using typescript: This is child component

interface CarouselItemProps {
  interval: number;
  src: string;
  alt: string;
  title: string;
  p: string;
  btn: string;
}

const CarouselItem:FC<CarouselItemProps> = (props: CarouselItemProps) => {
  return (
    <>
      <Carousel.Item interval={props.interval}>
        <img
          className="d-block w-100 carousel-img"
          src={props.src}
          alt={props.alt}
        />
        <Carousel.Caption>
          <h1 className="carousel-title">{props.title}</h1>
          <p className="carousel-p">{props.p}</p>
          <Button variant="primary" className="btn-contact-us">
            {props.btn}
          </Button>
        </Carousel.Caption>
      </Carousel.Item>
    </>
  );
};

export default CarouselItem;

And parent component:

  <Carousel>
    <CarouselItem interval={1000} 
      src="/images/banner-home.png" 
      alt="First slide"
      title="A company with industrial network 4.0"
      p="We provide technology solutions that serve business and life
      demands in the time of the technology boom with a young and
      dynamic internal force to keep abreast of the development trend of
      information society"
      btn="Contact Us"
    />

But I got the error at src="/images/banner-home.png" in parent component:

Type '{ interval: number; src: string; alt: string; title: string; p: string; btn: string; }' is not assignable to type 'IntrinsicAttributes & Omit<Pick<DetailedHTMLProps<HTMLAttributes, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & { ...; }, BsPrefixProps<...> & CarouselItemProps> & BsPrefixProps<...> & CarouselItemProps & { ...; }'. Property 'src' does not exist on type 'IntrinsicAttributes & Omit<Pick<DetailedHTMLProps<HTMLAttributes, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & { ...; }, BsPrefixProps<...> & CarouselItemProps> & BsPrefixProps<...> & CarouselItemProps & { ...; }'

Anyone knows how to solve this problem?

Similar issue to this: stackoverflow.com/questions/65251921/… — narliecholler
I read the above post and still don't know how to fix my problem. Can you explain clearer about how to solve this error? — mrSmith91

mrSmith91 mrSmith91 · Accepted Answer · 2021-04-08T08:13:07

I made a huge mistake: I imported CarouselItem from react-bootstrap instead of from my own component

Unable to pass props from parent components to child

2 Answers