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 Solution: Select Stars Based on Rating

Stheven Cabral
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Stheven Cabral
Full Stack JavaScript Techdegree Graduate 29,854 Points
Posted by Stheven Cabral
.a{fill-rule:evenodd;}techdegree seal-36
Stheven Cabral
Full Stack JavaScript Techdegree Graduate 29,854 Points

Why 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
Michael Hulet
47,913 Points
Michael Hulet
Michael Hulet
47,913 Points

You'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

Trevor Maltbie
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Trevor Maltbie
Full Stack JavaScript Techdegree Graduate 17,021 Points
Trevor Maltbie
.a{fill-rule:evenodd;}techdegree seal-36
Trevor Maltbie
Full Stack JavaScript Techdegree Graduate 17,021 Points

How is this different? Only one thing is being returned, the div with className "card":

const Course = (props) => {
  return (
    <div className="card">
      <div>
        <img src={props.url} alt={props.name} />
      </div>
      <h2>{ props.name }</h2>
      <p>{ props.desc }</p>
      <h3>Course Rating</h3>
      {/* A self-contained star rating component */}
      <StarRating /> 
    </div>
  );
}

but we still use "return."