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 Thinking in Components Composing Components

Tadjiev Codes
Tadjiev Codes
9,621 Points

Dear folks, I'm having trouble understanding why my App Component doesn't get rendered on the browser?

Dear folks, I'm having trouble understanding why my App Component doesn't get rendered on the browser? The link for the workspace: https://w.trhou.se/x0j4u30k4k
Although, when I render the Player Component, it actually does work. Thanks in advance)

2 Answers

Simon Coates
Simon Coates
4,911 Points

i had a look. I got something on screen once I reintroduced the commented out variables, altered the declaration of header (to include ()=>) and removed a // comment in favor of {/* */}

const desc = 'I just learned how to create a React node and render it into the DOM.';
const myTitleID = 'main-title';
const name = 'Guil';




const Header =()=>(
  <header>
    <h1 id={myTitleID}>{ name }'s First React Element!</h1> 
    <p className="main-desc">{ desc }</p>
  </header>
);

const Player = () => {

 return(
   <div className = "player">
     <span className = "player-name">
      Guil
     </span>

   {/* We're calling as if the Counter Component here and that's called Composition*/} 
        <Counter />

   </div>

 );


}


const Counter = () => {
 // retrun keyword within to hold our JSX
 return(

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

  </div>

 );

}


const App = () => {

  return(
  // A self closing Header tag to call that Header elemnent through composition method
     <div className="scoreboard">
     <Header />


    {/* Players list */} 
     <Player />


     </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);
Simon Coates
Simon Coates
4,911 Points

As state, there were 3 problems. The comment thing was kinda trivial. The initial one was an exception due to referencing variables that you'd commented out. The second was the arrow function thing being missing on header. Babel seems to compile it, but it produces a React element, rather than the function to create that element. So it crashes slightly later and with an error message in the browser console that is much less clear.

Tadjiev Codes
Tadjiev Codes
9,621 Points

Alright, thanks. I thought at first maybe it didn't work cuz of those variables but the problem was with the comment kind of

Tadjiev Codes
Tadjiev Codes
9,621 Points

And the ()=> arrow function symbols seem to be forgotten as well in that component