JavaScript React Basics (retired) Thinking in Components Loops and Lists in JSX

My code is not running on the browser.

My code is not running on the browser: here is my code:

var PLAYERS=[ { name:"Judith", score: 12, id:1, },

{ name:"Dodo", score: 45, id:2, },

{ name:"Mickaelle", score: 22, id:3, },

]

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

Application.propType={ title=React.Proptype.string, player=React.PropType.arrayOf(React.PropTypes.object.shape( name:React.PropType.string.isRequired, score: React.PropType.number.isRequired,)

).isRequired,

id=React.PropTypes.number.isRequired, }

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

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

Counter.propTypes={ score: React.PropTypes.number.isRequired, };

function Player(props){ <div className="players"> <div className="player"> <div className="player-name"> {props.name} </div> <div className="player-score"> <Counter score=props.score /> </div> </div> };

Player.propTypes={ name: React.PropTypes.string.isRequired, score: React.PropTypes.number.isRequired, };

function Application(props) { return ( <div className="scoreboard"> <Header title=props.title/> <div className="player"> {props.players.map(Function(players){ return <Player name={player.name} score={player.score} key={player.id} /> })
</div> </div> ); }

ReactDOM.render(<Application title="Scary Board" players={PLAYERS} />, document.getElementById('container'));

Cameron O'Brien
Cameron O'Brien
11,564 Points

It looks like maybe it could be a spelling error. In your Application.propType underneath your Header function you have:

Application.propType={ title=React.Proptype.string, player=React.PropType.arrayOf(React.PropTypes.object.shape( name:React.PropType.string.isRequired, score: React.PropType.number.isRequired,)

).isRequired,

id=React.PropTypes.number.isRequired, }

It looks like you need to change your 'propType' to be 'propTypes' like:

Application.propTypes = {
  title: React.PropTypes.string,
  players: React.PropTypes.arrayOf(React.PropTypes.shape({
    name: React.PropTypes.string.isRequired,
    score: React.PropTypes.number.isRequired,
    id: React.PropTypes.number.isRequired,
  })).isRequired,
};