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

Posted by Martin Nordström
Martin Nordström
6,807 Points

{props.title} doesn't work

When I type "{props.title}" nothing prints out to the screen. Does anyone know how to fix this? Thanks!

function Application(props) {
  return (
    <div className = "scoreboard">
      <div className = "header">
        <h1>{props.title}</h1>
      </div>

      <div className = "players">
        <div className = "player">
          <div className = "player-name">
            Martin Nordström
          </div>
          <div className = "player-score">
            <div className = "counter">
              <button className = "counter-action decrement"> - </button>
                <div className = "counter-score">23</div>
              <button className = "counter-action increment"> + </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
ReactDOM.render(<Application />, document.getElementById('container'))

[mod edit--formatting. See the Markdown Cheatsheet on how to format code in posts.]

4 Answers

Nick van der Sangen
Nick van der Sangen
11,516 Points

Hi Martin,

You need to set a value to the title property in the ReactDOM.render line. E.g.:

ReactDOM.render(<Application title="My Scoreboard" />, document.getElementById('container'));

Watch the corresponding video again https://teamtreehouse.com/library/properties

Kind regards, Nick

Seth Kroger
Seth Kroger
56,416 Points
Seth Kroger
Seth Kroger
56,416 Points

{props.title} isn't printing anything because the Application component you send to render doesn't have any props set. To set props you you add them as a custom HTML attribute like this:

ReactDOM.render(<Application title="My Awesome Title" />, document.getElementById('container'))
Madson Costa
Madson Costa
14,353 Points
Madson Costa
Madson Costa
14,353 Points

Hi Martin, You can see in this way, the name of the title will be set through the parameter. It is being set in the Application (props) function that returns the information in the ReactDOM.render line. E.g .:

ReactDOM.render (<Application title = "My Awesome Title" />, document.getElementById ('container'))
Martin Nordström
Martin Nordström
6,807 Points
Martin Nordström
Martin Nordström
6,807 Points

I have never felt so dumb.. Thanks guys!!