JavaScript React Basics (retired) Thinking in Components Decomposing our Application

Piotr Andrzejewski
Piotr Andrzejewski
6,874 Points

SyntaxError: http://localhost:8080/app.jsx: Unexpected token (3:4)

I followed Jim's instructions but I keep getting this error in the console. What am I doing wrong?

 SyntaxError: http://localhost:8080/app.jsx: Unexpected token (3:4)
  1 | function Header(props) {
  2 |   return {
> 3 |     <div className="header">
    |     ^
  4 |       <h1>{props.title}</h1>
  5 |     </div>
  6 |   };

and here is my code:

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">
            Jim Hoskins
          </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">
            Michael Jordan
          </div>
          <div className="player-score">
            <div className="counter">
              <button className="counter-action decrement"> - </button>
              <div className="counter-score"> 23 </div>
              <button className="counter-action increment"> + </button>
            </div>
          </div>
        </div>
        <div className="player">
          <div className="player-name">
            Messy
          </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>
    </div>
  )
}

Application.propTypes = {
  title: React.PropTypes.string.isRequired,
};
Application.defaultProps = {
  title: "Scoreboard",
}

ReactDOM.render(<Application />, document.getElementById('container'));

1 Answer

Javier Alvarado
Javier Alvarado
16,060 Points

I haven't taken this course yet so I could be wrong, but I think you want to use parentheses () with the return statement instead of curly braces {}. So your code should look like this:

function Header(props) {
  return (
    <div className="header">
      <h1>{props.title}</h1>
    </div>
  );
}
Piotr Andrzejewski
Piotr Andrzejewski
6,874 Points

Thanks buddy! Of course, you are right. Stupid overlook from my side.