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 React Basics (retired) Thinking in Components Decomposing our Application

Valeshan Naidoo
Valeshan Naidoo
27,008 Points
Posted by Valeshan Naidoo
Valeshan Naidoo
27,008 Points

syntax error line 47, but can't figure it out

I've reread the code again and again but I'm sure I still did something silly. anyway here's my code, apparently it's line 47 and about the "title:".

function Header(props) {
 return (
   <div className = "header">
      <h1> {props.title}</h1>
   </div>
 );
}

Header.propTypes = {
  title: React.PropTypes.string.isRequired, 
};

function Application(props) {
  return (
    <div className ="scoreboard">
      <Header title = {props.title} />
      <div className = "players">
        <div className = "player">
          <div className = "player-name">
          Jimbo Limbo
          </div>
          <div className = "player-score">
            <div className = "counter">
              <button className = "counter-action decrement"> - </button>
              <div className = "counter-score">31</div>
              <button className = "counter-action increment"> + </button>
            </div>
          </div>
        </div>

         <div className = "player">
          <div className = "player-name">
          Gimbo Timbo
          </div>
          <div className = "player-score">
            <div className = "counter">
              <button className = "counter-action decrement"> - </button>
              <div className = "counter-score">32</div>
              <button className = "counter-action increment"> + </button>
            </div>
          </div>
        </div>
      </div>
  );
}

Application.propTypes = {
  title: React.PropTypes.string, //apparently it's this title
};

Application.defaultProps = {
  title: "Scoreboard", 
}

ReactDOM.render(<Application />, document.getElementById('container'));
Daniel Bell
Daniel Bell
17,178 Points
Daniel Bell
Daniel Bell
17,178 Points

Are the commas at the end causing the problem?

Valeshan Naidoo
Valeshan Naidoo
27,008 Points
Valeshan Naidoo
Valeshan Naidoo
27,008 Points

apparently it's between the title and the colon

justdave
justdave
31,518 Points

Take a look at your divs ;p

Valeshan Naidoo
Valeshan Naidoo
27,008 Points
Valeshan Naidoo
Valeshan Naidoo
27,008 Points

@davidwyett thanks for the heads up! after that fix, I had 3 other issues pop up, but all fixed up now.

justdave
justdave
31,518 Points

No worries. That course is a bit of a whirlwind. I went through it twice and still was quite confused at the end. I think that's mostly due to such a large gap in knowledge between Jim and myself. The React release has changed since the video was made too, proptypes are no longer in the core package and I think the syntax is slightly different, so don't spend too much time on that as you might end up using a different package for checking props.

Valeshan Naidoo
Valeshan Naidoo
27,008 Points
Valeshan Naidoo
Valeshan Naidoo
27,008 Points

I'm doing the React track now, do you know if the rest of the React courses have the updated syntax etc? otherwise I may as well learn React from a different source and learn something else in treehouse.