0

I have a component receiving props from a parent page like so:

<Component componentProps={item?.fields} />

where "item" is one object on an array returned from getStaticProps.

Within the component, I am attempting to destructure various properties from componentProps. Some of the fields cause no issues, but one property, "Image" causes an error: "React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object."

const { heading, description, yellowCardInfo, overlayImage, Image } = componentProps

I have commented out everything else in the component, so it is the destructuring that is causing the issue. If I make a check for the componentProps first, it doesn't crash:

if (componentProps) {
    const { Image } = componentProps
}

Does anyone know why this might be the case? I have logged out both "componentProps" and "Image" and at no point do they appear to be undefined. If I use dot notation instead of destructuring, i.e. const Image = componentProps.Image it also doesn't crash.

Thanks!

intrepidmouse
  • 21
  • 2
  • Try destructuring by renaming ```Image``` to ```const { heading, description, yellowCardInfo, overlayImage, Image: propImage } = componentProps```. That could be the confict with ```next/image```. – Mallikarjun M G Feb 20 '23 at 14:49

0 Answers0