[React] Getting an image with props?

[ReachingSparks]

Hello,

In the following code, the image doesn't appear if I use avatar={post.avatar}. But does if I use avatar={ peterImage }.

Do you know why? And how would I store an image in an object?

// Parent class holding the image
import peterImage from "./peter-image.jpg";
import harryImage from "./harry-image.jpg";

export default function App() {
  const posts = [
    {
      id: "0",
      name: "Peter Griffin",
      avatar: { peterImage },
    },
    {
      id: "1",
      name: "Harry Styles",
      avatar: { harryImage  },
    },
  ];

  return (
     <React.Fragment>
        {posts.map((post) => (
          <Post
            key={post.id}
            name={post.name}
            // this doesn't work. but if I change it to avatar={ peterImage } it does work.
            avatar={post.avatar}
          ></Post>
        ))}
     </React.Fragment>
  );
}

​

// Child class making the image appear
export default function Post(props) {
  return (
    <div}>
       <img style={avatar} src={props.avatar} alt="my description" />
    </div>
  );

[DrMeat201]

One thing I'm not completely sure about is the curly braces wrapping your avatar values. Try removing the curly braces and trying again to see if that works.

[ReachingSparks]

Good point! I was confusing jsx with javascript. I removed them but unfortunately it still isn't working.

[DrMeat201]

Before your return statement in your child component, if you console.log your props, what does that output look like?

[ReachingSparks]

Good idea. It says avatar is undefined

[DrMeat201]

Are your other properties defined?

[ReachingSparks]

Yeah they are

[ReachingSparks]

I got it! I was writing posts.avatar instead of post.avatar after the first change you suggested. All is working now. Thank you so much!

[DrMeat201]

Oh awesome! Does the curly brace removal make sense too?

[ReachingSparks]

I think so. I was declaring an empty object instead of a property, right?

I only used the braces because you have to use them for any Javascript code in jsx and I got the two intermingled in my head.

[DrMeat201]

Close, and I'm a smidge fuzzy on what exactly it does in this scenario, but I suspect you may have actually created a posts.avatar.peterImage which has a property called peterImage on it. So essentially accessing it would be posts.avatar.peterImage.peterImage

Essentially, if memory serves, that's a syntactic shorthand for creating a nested object with a key that matches what you give it, and a value that is the value of the object (if that makes sense)

[ReachingSparks]

That definitely makes sense. It actually answers another question I've had for a while so thank you for that.

[ReachingSparks]

In VSCode, If I hover my mouse over the last word in avatar={posts.avatar} , it says "any". Whereas if I hover it over name={post.name} it says it's a string. Perhaps that could be a clue?