Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript One Solution

Truong Minh Nguyen
Truong Minh Nguyen
12,575 Points

Component returned value cannot starts with an iteration

Hi guys. I have a react component as follows:

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

The commented lines will cause the error 'Unexpected token, expected ,' but if I uncomment them, it works normally. So the returned statement must always start with an element like <div className="container">?

Bader Alsabah
Bader Alsabah
4,738 Points

I believe the return statement must always return a JSX object - not a JSX expression (which is what you have between curly braces). So as long as you return a JSX object (built in or custom) - you can insert within it as many different expressions as you want - assuming they're valid. I sometimes put console.logs between my JSX object opening and closing tags to debug my code.

2 Answers

Alex Koumparos
seal-mask
.a{fill-rule:evenodd;}techdegree
Alex Koumparos
Python Development Techdegree Student 36,862 Points

Hi Truong,

Like Bader says in his comment, a valid JSX object cannot be just a JSX expression. Thus, the curly braces that enclose the JavaScript code must be inside an element (such as a div).

Also, valid JSX object must have exactly one outer, 'parent' element, but it can have any number of child elements. Remember, that when Babel converts the JSX to JavaScript, it is going to be turning your JSX into a React.createElement() call, and if we look at the syntax for React.createElement():

React.createElement(
  type,
  [props],
  [...children]
)

As you can see, the first argument must be a single element, in this case a 'div', but it could be any container element, such as a ul.

When you uncomment your lines of code, you are putting all the planet elements inside the one container element, which is valid. When you have the lines commented, you have a pile of sibling elements but no parent, and therefore no single element to be the type argument in createElement()

Hope that clears things up.

Kind regards,

Alex

Hakan Ergoksen
Hakan Ergoksen
2,168 Points

Hi Truong,

Babel compiler doesn't understand your code. Because you have syntax error. You must remove curly braces if you want to use JavaScript Expressions alone.

You should write it like this:

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

You can also write this way:

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