Search code examples
reactjsundefinedreact-props

React is correctly receiving props but become undefined

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):

console.log(pos)

Here is the content of the image.

console.log(image):

enter image description here

Console logging mediaId reproduces the same error.

Any ideas what I am doing wrong?

Solution

  • 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>
      ))}
    </>
  );
};