Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript React Basics Introducing Props Use Props to Create Reusable Components

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

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.

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

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

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,111 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

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 :)