I have done everything right and my code is still won't render to the browser. Please help.

// 1: Create a 'Planet' component that renders a planet card


const Planet = (props) => {
  return (
    <div className="card">
        <div>
          <img src={props.url} alt={props.name}/>
        </div>
        <h2>{props.name}</h2>
        <p>{props.desc}</p>
        <h3>Planet Profile</h3>
        <ul>
          <li><strong>Diameter:</strong> {props.diameter}</li>
          <li><strong>Moons:</strong> {props.moons}</li>
        </ul>
      </div>
      <div className="card">...</div>
  );
}

// 2: Create a container component that iterates over the planets array 
//    and renders a 'Planet' component for each object in the array 

const Planets = (props) => {
  return (
     <div className="container"> 

     {props.listofPlanets.map( planet =>
        <Planet
            name={planet.name}
            diameter={planet.diameter}
            moons={planet.moons}
            desc={planet.desc}
            key={planet.id}
            url={planet.url}
        />

     )}
     </div>
  );
}

// 3: Render the container component to the DOM

ReactDOM.render(
  <Planets listofPlanets={planets} />,
  document.getElementById('root')
);