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

Christie Parkhurst
Christie Parkhurst
5,925 Points

Page In Browser Says LOADING...waiting for roots to load.

I can't get the page to display in the browser. I can't find the error in my code....can anyone help me?

I did a snapshot here: https://w.trhou.se/96ncfy2gyp

Here is the code as well:

var PLAYERS - [ { name: "Jim Hoskins", score: 31, }, { name: "Andrew Chalkley", score: 35, }, { name: "Alena Holligan", score: 42, },

]

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

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) { return ( <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.isRequried, };

function Application(props) { return ( <div className="scoreboard"> <Header title={props.title} /> <div className="players"> <Player name="Christie Parkhurst" score={31} /> <Player name="Andrew Chalkley" score={33} />

  </div>
  </div>

); }

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

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

Christie Parkhurst
Christie Parkhurst
5,925 Points

Thanks for your help. I changed that " - " to a " = ", but that didn't fix it. Any other suggestions?

1 Answer

I believe it is because you typed "-" instead of "=" on the very first line where you create an array

Christie Parkhurst
Christie Parkhurst
5,925 Points

Thanks for your help. I changed that " - " to a " = ", but that didn't fix it. Any other suggestions?