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

Tadjiev Codes
Tadjiev Codes
9,626 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
8,377 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
8,377 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,626 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,626 Points

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