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

Brian Patrick
PRO
Brian Patrick
Pro Student 2,770 Points

Getting syntax error for Player.propTypes section. Help.

I get this in dev tools.

Unexpected token (30:6) 28 | 29 | Player.propTypes = {

30 | name: React.PropTypes.string.isRequired, | ^ 31 | score: React.PropTypes.number.isRequired, 32 | } 33 |

function Player(props) {
  return(
  <div className="player">
    <div className="player-name">
    {props.name}
    </div>
    <div className="player-score">
      <div className="counter">
        <button className="counter-action decrement"> - </button>
          <div className="counter-score"> {props.score} </div>
        <button className="counter-action increment"> + </button>
      </div> 
    </div>
  );
}

Player.propTypes = {
  name: React.PropTypes.string.isRequired,
  score: React.PropTypes.number.isRequired,
}
Brian Patrick
Brian Patrick
Pro Student 2,770 Points

I commented out the Player.propTypes object and I get the same errors with

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

The code was working before I added the Player function.

1 Answer

Andrew Hickman
Andrew Hickman
Full Stack JavaScript Techdegree Student 10,013 Points

Hey there Brian! You are getting a syntax error because <div className="player-score"> is not closed. React is attempting to render invalid JSX. Simply add a closing tag:

function Player(props) {
  return(
  <div className="player">
    <div className="player-name">
    {props.name}
    </div>
    <div className="player-score">
      <div className="counter">
        <button className="counter-action decrement"> - </button>
          <div className="counter-score"> {props.score} </div>
        <button className="counter-action increment"> + </button>
      </div> 

// CLOSE DIV.PLAYER-SCORE:
     </div>
    </div>
  );
}