I am passing props to a component that correctly receives its value but become undefined.

const ImageView = () => {
  const { image } = useMedia();
  
  return image.map(img => (
    <Drag key={img.id} mediaId={img.id} pos={{x: img.x, y: img.y}} >
      <img src={backFiles   img.link} alt="" />
    </Drag>
  ));
};

The Drag component is doing that:

const Drag = ({children, mediaId, pos}) => {
  console.log(pos)
  ...
  return (
    <Article>
      {children}
    </Article>
  );
};

When I console.log pos look what happens:

console.log(pos)

Here is the content of image.

console.log(image)

Console logging mediaId reproduces same error.

Any ideas what I am doing wrong?

CodePudding user response：

image.map needs to return something. The Error could be occurring from there

    const ImageView = () => {
  const { image } = useMedia();
  
  return image.map(img => (
  return ( <Drag key={img.id} mediaId={img.id} pos={{x: img.x, y: img.y}} >
              <img src={backFiles   img.link} alt="" />
           </Drag>)
          ));
         };

CodePudding user response：

ImageView component should return a component, it currently returns an array instead.

Change ImageView to the following:

const ImageView = () => {
  const { image } = useMedia();

  return (
    <>
      {image.map((img) => (
        <Drag key={img.id} mediaId={img.id} pos={{ x: img.x, y: img.y }}>
          <img src={backFiles   img.link} alt="" />
        </Drag>
      ))}
    </>
  );
};