Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript One Solution

Norman Lew
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Norman Lew
Full Stack JavaScript Techdegree Graduate 14,784 Points
Posted by Norman Lew
.a{fill-rule:evenodd;}techdegree seal-36
Norman Lew
Full Stack JavaScript Techdegree Graduate 14,784 Points

Nothing shows up when visiting

Hi, when I visit the page, nothing appears on the page. It doesn't work when I use the code for the official solution either. I have not been able to figure out what is wrong.

But when I comment out the entire app.js file, and uncomment out the example template in the index.html file, Mercury appears. Please help.

The link to the solution I cannot view on a webpage when I run the code is at https://teamtreehouse.com/library/one-solution-14

http://localhost:8000/

Milz Dechnik
Milz Dechnik
7,813 Points

Did you get any errors in the console of the browser?

2 Answers

Kalen Honeyfield
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Kalen Honeyfield
Full Stack JavaScript Techdegree Graduate 17,718 Points
Kalen Honeyfield
.a{fill-rule:evenodd;}techdegree seal-36
Kalen Honeyfield
Full Stack JavaScript Techdegree Graduate 17,718 Points

I was not able to get the example solution to work either, however I did come to a solution.

       props.planets.map(planet =>{
          return (
            <Planets
              name={planet.name} 
              url={planet.url}
              diameter={planet.diameter}
              moons={planet.moons}
              desc={planet.desc}
              key={planet.id}
            />
          )
        })

Adding a return to this, solved the issue.

Anthony Darter
Anthony Darter
1,581 Points
Anthony Darter
Anthony Darter
1,581 Points

You should wrap your Planets in a div with a className set to "container". It is best practice to return a parent element with children. Like so:

const PlanetList = (props) => {
  return (
    <div className="container">
      {props.planetData.map( planet => 
        <Planet 
          key={planet.id}
          name={planet.name}
          diameter={planet.diameter}
          moons={planet.moons}
          desc={planet.desc}
          url={planet.url}
        />
      )}
    </div>
  );
}