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 (retired) Thinking in Components PropTypes and DefaultProps

Shailendra kushwaha
Shailendra kushwaha
1,523 Points

I have copied as Instructor but even though its not working!!!

Application.propTypes = {
  title: React.Proptypes.string,
};
Application.defaultProps = {
  title: "Scoreboard",
}
ReactDOM.render(<Application />, document.getElementById("container"));
Rich Donnellan
Rich Donnellan
Treehouse Moderator 27,696 Points

Question updated with code formatting. Check out the Markdown Cheatsheet link below the "Add an Answer" for syntax examples.

6 Answers

Gbemi Ojo
Gbemi Ojo
735 Points

Are you following along on your own text editor or in the attached workspace? If you're working in your own text editor, you may need to add a script tag for the propType method from react i.e.

<script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script>

Yep, this was for me. Should be included in teachers note for those not using workspace and using local dev environment.

Gbemi Ojo
Gbemi Ojo
735 Points

Hi Shailendra, I think the issue might be with your key value pair in the propTypes object. React recently deprecated the prop-type object so now the method call is PropTypes.string, not React.PropTypes.string. Also, I noticed your code snippet has "Proptypes" with the "Types" not capitalized.

Application.propTypes = {
    title: PropTypes.string,
};

include

<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.2/prop-types.min.js"></script>
Shailendra kushwaha
Shailendra kushwaha
1,523 Points

Hi, I have following on my own text editor and have attached this to the index.html file. It displays the result for small seconds and again shows the error as previous. Ihave posted both the html file and react file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>My-app</title>
  </head>
  <body>
            <script type="text/babel" src="./src/react.jsx"></script>
            <script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script>
    <div id="container">
    </div>
  </body>
</html>




import React from 'react';
import ReactDOM from 'react-dom';
import propTypes from 'prop-types';
function formatName(users) {
  return users.firstName + ' ' + users.lastName
};
const users = {firstName: 'Dilip',
              lastName: 'Poudel'};
const elements = (<h1>Hello,{formatName(users)}!</h1>);

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

      <div className="player">
      <div className="player-name">Dilip</div>
      <div className="player-score">
      <div className="counter">
      <button className="increament"> + </button>
      <div className="counter-score">35</div>
      <button className="decreament"> - </button>
      </div>
    </div>
  </div>
      <div className="player">
      <div className="player-name">Madhu</div>
      <div className="player-score">
      <div className="counter">
      <button className="increament"> + </button>
      <div className="counter-score">32</div>
      <button className="decreament"> - </button>
      </div>
      </div>
    </div>
  </div>
</div>
  );
}
Application.propTypes = {
  title: PropTypes.string.isRequired,
};
Application.defaultProps = {
  title:"Scoreboard",
}
ReactDOM.render(<Application />, document.getElementById("container"));
Rich Donnellan
Rich Donnellan
Treehouse Moderator 27,696 Points

S,

Can you update the code formatting as I explained in the OP? Help us help you.

Rich Donnellan
Rich Donnellan
Treehouse Moderator 27,696 Points

In case you didn't know, you're able to edit your comments/answers by clicking on the ellipsis (...) within the Add Comment area.

Shailendra kushwaha
Shailendra kushwaha
1,523 Points

Hi, still i have trouble with this code. So, could you please correct it if possible? The Error message is showing that the "PropTypes" is not defining in this line: "title: PropTypes.string.isRequired,".

Application.propTypes = {
  title: PropTypes.string.isRequired,
};
Application.defaultProps = {
  title:"Scoreboard",
}
ReactDOM.render(<Application />, document.getElementById("container"));
Shailendra kushwaha
Shailendra kushwaha
1,523 Points
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>My-app</title>
  </head>
  <body>
            <script type="text/babel" src="./src/react.jsx"></script>
            <script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script>
    <div id="container">
    </div>
  </body>
</html>
Shailendra kushwaha
Shailendra kushwaha
1,523 Points
import React from 'react';
import ReactDOM from 'react-dom';
import propTypes from 'prop-types';
function Application(props) {
  return(
  <div className="application">
    <div className="header">
      <h1>{props.title}</h1>
    </div>
    <div className="players">

      <div className="player">
      <div className="player-name">Dilip</div>
      <div className="player-score">
      <div className="counter">
      <button className="increament"> + </button>
      <div className="counter-score">35</div>
      <button className="decreament"> - </button>
      </div>
    </div>
  </div>

      <div className="player">
      <div className="player-name">Madhu</div>
      <div className="player-score">
      <div className="counter">
      <button className="increament"> + </button>
      <div className="counter-score">32</div>
      <button className="decreament"> - </button>
      </div>
      </div>
    </div>
  </div>
</div>
  );
}
Application.propTypes = {
  title: PropTypes.string.isRequired,
};
Application.defaultProps = {
  title:"Scoreboard",
}
ReactDOM.render(<Application />, document.getElementById("container"));

same thing, it doesn't work for me too. I am following it in the inbuilt editor and following is code,

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">
            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>
    </div> 
  );
}

Application.propTypes = {
  title: PropTypes.string,
};
Application.defaultProps = {
  title:"Scoreboard",
}

ReactDOM.render(<Application />, document.getElementById('container'));