Why is my layout breaking here?

Question

I think I followed every step exactly but my players components are breaking outside of their container. Here is my code so far:

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

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

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

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="players">

      <Player name="Jason Welsh" score={99} />
      <Player name="Athena Welsh" score={99} />

    </div>

   </div>
  );
}

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

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

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

Answer 1 · 2017-08-21T13:51:47Z

August 21, 2017 1:51pm

In your Player function, you need to wrap props.score with {}. so it should be

<div className="counter-score"> {props.score}</div>

You also need to refactor it to a Counter function, which is done later in the video.

Welcome to the Treehouse Community

Looking to learn something new?

Jason Welsh

Jason Welsh

Why is my layout breaking here?

1 Answer

Michael Chi

Michael Chi