Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript React Basics (2018) Introducing Props Use Props to Create Reusable Components

Why is my score not displaying 50?

I am at the 3min mark and I have done everything the instructor has said and Im refreshing the browser and running of a live port and still getting 35. What am I doing wrong?

const Header = (props) => {
  return (
    <header>
      <h1>{ props.title }</h1>
      <span className="stats">Players: { props.totalPlayers }</span>
    </header>
  );
}

const Player = (props) => {
  return (
    <div className="player">
      <span className="player-name">
        {props.name}
      </span>

      <Counter score={props.score} />
    </div>
  );
}

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

const App = () => {
  return (
    <div className="scoreboard">
      <Header 
        title="Scoreboard" 
        totalPlayers={1} 
      />

      {/* Players list */}
      <Player name="Guil" score={50} />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

@krisnikolaisen here is the code Kris

KRIS NIKOLAISEN here is the code

I tried your code in the video's workspace and it shows 50. May be a caching issue. If you are using Chrome I think you can hold down the shift key and refresh to force a reload. There are other means of clearing the cache as well. Trying it in incognito mode might be one.

2 Answers

Ian Ostrom
seal-mask
.a{fill-rule:evenodd;}techdegree
Ian Ostrom
Full Stack JavaScript Techdegree Student 10,331 Points

I agree with Kris. Your code looks right and worked properly for me too. Maybe you didn't save before refreshing your browser. I do that all the time.

Yuri Souza
Yuri Souza
9,518 Points

I've had the same issue, it's a problem with Chrome. I don't really know how to fix it but when i changed browser it worked.