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) Thinking in Components Create the Player Component

Posted by Giles Bradford
Giles Bradford
4,257 Points

I can get my "Header" to show but not my "Player" function. I have <Player /> but it still shows the Header.

I have the exact code above and I am running my SimpleHTTPServer. I can load my header fine but once I try to switch and see if my players component is looking good it still only loads the header component.

Things I have made sure of:

  1. Saving all appropriate files
  2. making sure the first letter of each function component is capital.
  3. I have tried arrow function and non arrow functions.

The error I am getting is telling me that I have an issue with an "Uncaught reference error.: title is not defined. I can't seem to find it.

Paolo Scamardella
Paolo Scamardella
24,828 Points
Paolo Scamardella
Paolo Scamardella
24,828 Points

You need to paste some code in order for us to help you.

Giles Bradford
Giles Bradford
4,257 Points

I moved the "scoreboard" file to my desktop and now I am shown the "Player Component" but when I change it back to the "Header component" I am still seeing the player.

Here is my index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Scoreboard</title>
    <link rel="stylesheet" href="./app.css" />
  </head>

  <body>
    <div id = 'root'></div>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel" src="./app.js"></script>
  </body>
</html>

Here is my app.js

const Header = () => {
    return (
        <header>
            <h1>Scoreboard</h1>
            <span className ="stats">Players: 1</span>
        </header>
    );
}

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

            <div className = "counter">
                <button className = "counter-action decrement"> - </button>
                    <span className = "counter-score"> 35 </span>
                <button className = "counter-action increment"> + </button>
            </div>
        </div>
    );
}

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

Mod Edit: Fixed broken/missing Markdown formatting

3 Answers

Masha Blair
Masha Blair
13,005 Points
Masha Blair
Masha Blair
13,005 Points

To avoid this issue in the future, make sure you clear your browser cache and do hard reload. So you have the latest changes.

Leanne Werner
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Leanne Werner
Front End Web Development Techdegree Graduate 16,847 Points
Leanne Werner
.a{fill-rule:evenodd;}techdegree seal-36
Leanne Werner
Front End Web Development Techdegree Graduate 16,847 Points

This was part of my problem with getting react to render to the browser! But after emptying Cache and doing the hard reload it worked perfectly! For anyone who wants to try this, make sure you have your dev tools open, then click and hold the refresh button.

Paolo Scamardella
Paolo Scamardella
24,828 Points
Paolo Scamardella
Paolo Scamardella
24,828 Points

Maybe I'm not understanding your question. You said that you cannot show the Player component, correct? If so, then you are not using the Player component. All you have to do is add <Player /> to: ReactDOM.render( <Player />, document.getElementById('root') );

Giles Bradford
Giles Bradford
4,257 Points
Giles Bradford
Giles Bradford
4,257 Points

Paolo Scamardella Thank you for your response. I was doing what you said. Apparently giving it a few minutes to update rather than assume it would switch instantly was the issue. I had it right. Again thank you.