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 Erika Reiman
Erika Reiman
4,529 Points

Why aren't all my players rendering in the DOM? I have added multiple Player components but only one player shows up

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} /> <Player name="Treasure" score={90} /> <Player name="Ashley" score={85} /> <Player name="James" score={80} /> </div> ); }

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

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,967 Points

If you are using a workspace can you post a snapshot? Click the camera icon in the upper right corner, then 'Take Snapshot', then post the link created here.

Erika Reiman
Erika Reiman
4,529 Points

Thanks Kris! I am actually not using a workspace but attempting to use VSCode and a SimpleHTTPServer. Would screenshots of those be helpful?

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,967 Points

Screenshots are hard to work with. Can you paste your code for index.html? I see a lot of errors in the console using the video's workspace.

2 Answers

Yasir alabadi
Yasir alabadi
5,744 Points

Did you figure this out? From what I can see the code seems fine to me., but hard to tell, it would beneficial for all parties if you are to either screenshot your code, of paste it according to the guidelines so that we can help you better :)

Erika Reiman
Erika Reiman
4,529 Points
Erika Reiman
Erika Reiman
4,529 Points

This is my index.html code:

<!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>

Sheila Anguiano
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Sheila Anguiano
Full Stack JavaScript Techdegree Graduate 35,236 Points
Sheila Anguiano
.a{fill-rule:evenodd;}techdegree seal-36
Sheila Anguiano
Full Stack JavaScript Techdegree Graduate 35,236 Points

Hi Erika, it would be easier to read if you use markdown, so we can read the code correctly formatted like this:

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

Instead of this:

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

Is a best practice when asking coding questions, and you'll get answers faster