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 25,737 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>
Xayaseth Boudsady
Xayaseth Boudsady
21,951 Points

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.

Xayaseth Boudsady
Xayaseth Boudsady
21,951 Points
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 25,737 Points

S,

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

Rich Donnellan
Rich Donnellan
Treehouse Moderator 25,737 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'));