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 trialStheven Cabral
Full Stack JavaScript Techdegree Graduate 29,854 PointsWhy is the JSX in the Star component not within the return method.
Hi All,
I wanted to ask why the the JSX in the Star component not returned, where as all the other JSX from the rest of the components are.
const Star = (props) =>
<li className={props.isSelected ? 'selected' : null} onClick={props.setRating}>
<svg x="0px" y="0px"
viewBox="0 0 16 15" className="star">
<path d="M8.5,0.3l2,4.1c0.1,0.2,0.2,0.3,0.4,0.3l4.6,0.7c0.4,0.1,0.6,0.6,0.3,0.9l-3.3,3.2c-0.1,0.1-0.2,0.3-0.2,0.5l0.8,4.5
c0.1,0.4-0.4,0.8-0.8,0.6l-4.1-2.1c-0.2-0.1-0.3-0.1-0.5,0l-4.1,2.1c-0.4,0.2-0.9-0.1-0.8-0.6l0.8-4.5c0-0.2,0-0.4-0.2-0.5L0.2,6.2
C-0.2,5.9,0,5.4,0.5,5.3L5,4.7c0.2,0,0.3-0.1,0.4-0.3l2-4.1C7.7-0.1,8.3-0.1,8.5,0.3z"/>
</svg>
</li>;
1 Answer
Michael Hulet
47,913 PointsYou're defining Star
to be an arrow function. If arrow functions only contain 1 expression, the result of that expression is returned directly, without the need to write a return
keyword or curly braces. Since your arrow function only contains 1 expression (generate all that JSX), it's returned directly, without the need to explicitly write return
or use curly braces
Stheven Cabral
Full Stack JavaScript Techdegree Graduate 29,854 PointsStheven Cabral
Full Stack JavaScript Techdegree Graduate 29,854 PointsThank you for the help Michael Hulet !
Trevor Maltbie
Full Stack JavaScript Techdegree Graduate 17,021 PointsTrevor Maltbie
Full Stack JavaScript Techdegree Graduate 17,021 PointsHow is this different? Only one thing is being returned, the div with className "card":
but we still use "return."