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

Emily Schoof
Emily Schoof
5,230 Points

Hey guys! Not exactly sure what happened, but I can no longer preview any React.js code....

//Decompressing Application: A Header with Several Players 

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

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

function Player(props) {
  <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>
  </div>
}

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

function Application(props) {
  return (
    //create a div element for our code
    //add a class to the div element
    <div className="scoreboard">

      <Header title={props.title}/>

       <div className="players">
          <Player name="Emily Schoof" score={10}/>
          <Player name="Melissa Cook" score={11}/>
      </div>
  </div>
  );
}

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


ReactDOM.render(<Application title="My Scoreboard"/>, document.getElementById('container'));
Emily Schoof
Emily Schoof
5,230 Points

Wait, nevermind! I just figured it out: I forgot to add the return(); to my Player function. I'll keep this question up just in case it will helps others.

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>
  </div>
);
}

1 Answer

i think you can change in your header : Header.propTypes = { title: React.PropTypes.string.toRequired, }; to Header.propTypes = { title: React.PropTypes.string.isRequired, };