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 Rostyk Lukavyi
Rostyk Lukavyi
12,975 Points

React.js

I don't understand this line of code. Can you explain me? I don't understan propTypes/ React.PropTypes.string/ What does it mean>?????

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">
            Jim Hoskins
          </div>
          <div className="player-score">
            <div className="counter">
              <button className="counter-action decrement"> - </button>
              <div className="counter-score"> 31 </div>
              <button className="counter-action increment"> + </button>
            </div>
          </div>
        </div>

        <div className="player">
          <div className="player-name">
            Andrew Chalkey
          </div>
          <div className="player-score">
            <div className="counter">
              <button className="counter-action decrement"> - </button>
              <div className="counter-score"> 33 </div>
              <button className="counter-action increment"> + </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}  

Below
Application.propTypes = {
  title: React.PropTypes.string,   <--- Here
};

Application.defaultProps = {
  title: "Scoreboard",
}

ReactDOM.render(<Application />, document.getElementById('container'));
Alexander Davison
Alexander Davison
65,469 Points

Can you post your answer as a "Answer" and not a "Comment"? If you do so, it enables other students to upvote your answer and the author of the question will be able to give you a Best Answer.

Note that upvotes count 1 point and best answers are worth 12 points!

1 Answer

Adriaan Janse van Rensburg
Adriaan Janse van Rensburg
2,708 Points
Adriaan Janse van Rensburg
Adriaan Janse van Rensburg
2,708 Points

I just started learning React and this is my understanding of what that means:

The Application Component is passed a property (props) which it uses to display on the webpage. In this case it is called 'title'. The line React.PropType.string means that the property of 'title' should be a string (eg. "Scoreboard"). If a different value is passed such as a number or array you will get an error.

In short: It validates properties passed to a component.

This link might also help explain it more: https://facebook.github.io/react/docs/typechecking-with-proptypes.html