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

Posted by Brian Lockerbie
.a{fill-rule:evenodd;}techdegree seal-36
Brian Lockerbie
Full Stack JavaScript Techdegree Graduate 17,512 Points

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?

Brian Lockerbie
.a{fill-rule:evenodd;}techdegree seal-36
Brian Lockerbie
Full Stack JavaScript Techdegree Graduate 17,512 Points 
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')
);
Brian Lockerbie
.a{fill-rule:evenodd;}techdegree seal-36
Brian Lockerbie
Full Stack JavaScript Techdegree Graduate 17,512 Points

@krisnikolaisen here is the code Kris

Brian Lockerbie
.a{fill-rule:evenodd;}techdegree seal-36
Brian Lockerbie
Full Stack JavaScript Techdegree Graduate 17,512 Points

KRIS NIKOLAISEN here is the code

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,971 Points

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,332 Points
Ian Ostrom
.a{fill-rule:evenodd;}techdegree
Ian Ostrom
Full Stack JavaScript Techdegree Student 10,332 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
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.