Images Not Showing in browser

Make sure that you're not wrapping the JSX expression in double quotes.

So the sample provided is

        <div>
          <img src="img/mercury.jpg" alt="Mercury">
        </div>

and we'll convert it to

        <div>
          <img src={props.url} alt={props.name}>
        </div>

If you accidentally just replace the URL with the expression, and don't get rid of the double quotes, that content wont render! This is because the content is already wrapped in quotes in the array, so you'd be doubling up!

So if your code looks like this...

        <div>
          <img src="{props.url}" alt="{props.name}">
        </div>

...just remove the quotes!

It's actually not 'className' but it's 'src' (for img tag) and to dynamically load images in the 'card' div (instead of hard coding the url).

In the Planet component, you'll need to pass: src={ props.url } and same with: alt={ props.name }.

So the the div looks like:

    <div>
      <img src={props.url} alt={props.name} />
    </div>

These props are passed from the 'container' component. When ReactDOM renders the 'container' component, correct planet images will be placed in the 'card' div.

You may also need to make sure the <img> tag is self closing. I copied the <img> tag from the HTML file

<img src="img/mercury.jpg" alt="Mercury">

and the images would not render:

<img src={props.url} alt={props.name}>

However adding the trailing slash to make the tag self closing renders correctly:

<img src={props.url} alt={props.name} />