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
Shailendra kushwaha
1,523 PointsI 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"));
6 Answers
Gbemi Ojo
735 PointsAre 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
21,951 PointsYep, this was for me. Should be included in teachers note for those not using workspace and using local dev environment.
Gbemi Ojo
735 PointsHi 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
21,951 PointsApplication.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
1,523 PointsHi, 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
Treehouse Moderator 27,671 PointsS,
Can you update the code formatting as I explained in the OP? Help us help you.
Rich Donnellan
Treehouse Moderator 27,671 PointsIn 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
1,523 PointsHi, 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
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
1,523 Pointsimport 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"));
Deepankumar Patel
61 Pointssame 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'));
Rich Donnellan
Treehouse Moderator 27,671 PointsRich Donnellan
Treehouse Moderator 27,671 PointsQuestion updated with code formatting. Check out the Markdown Cheatsheet link below the "Add an Answer" for syntax examples.