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

Marcos Gonzales
Marcos Gonzales
3,688 Points

Not sure why only my header is displaying..

Here is my code...

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="Marcos Gonzales" score={2} />
      <player name="Jake, from state farm" score={3} />
      </div>
    </div>
  );
}

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

Application.defaultProps = {
 title: "Scoreboard", 
}    

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

2 Answers

Ari Misha
Ari Misha
19,261 Points

Hiya there! It's happening 'coz the Player component was typed wrong. In react, be it a functional or class component or container components, naming should be camel-cased and starts with a capital alphabet and you have to follow the same pattern while calling the same component. So yeah just change the word from "player" to Player and you're good to go.

I hope it helped!

~ Ari

Marcos Gonzales
Marcos Gonzales
3,688 Points

Thank you! I figured this out as well just now haha! thanks! i also spelled required wrong in the Player.propTypes! Thanks for the help.