Destiny 2 Steam Transfer Cannot Read Props of Undefined
Welcome to the Treehouse Customs
The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you lot need feedback on, or asking for an actress set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students tin comment or ask questions, merely non-students are welcome to scan our conversations.)
Looking to learn something new?
Treehouse offers a seven mean solar day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your costless trial today.
TypeError: Cannot read belongings 'props' of undefined
Here is my workspace: https://w.trhou.se/7wkhddyoo8 (modified the link, cheers @Steven Parker)
More than specifically, hither is the offending code:
const Counter = React.createClass({ propTypes: { score: React.PropTypes.number.isRequired, }, render: () => { return ( < div className = "counter" > < button className = "counter-action decrement" > - </ button > < div className = "counter-score" > {this.props.score} </ div > < button className = "counter-activity increment" > + </ push > </ div > ); } }); According to the compiler, props does non exist. Notwithstanding, through the Thespian SFC, I am passing in the score holding to the Counter component:
const Player = (props) => { return( < div className = "player" > < div className = "player-name" > {props.proper noun} </ div > < div className = "histrion-score" > < Counter score = {props.score}/ > </ div > </ div > ); }; Give thanks you lot!
Edit Panel Error:
Uncaught TypeError: Cannot read belongings 'props' of undefined at Constructor.render (eval at transform.run (babel-browser.min.js:4), < anonymous >:53:19) at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (react.js:6157) at ReactCompositeComponentWrapper._renderValidatedComponent (react.js:6177) at ReactCompositeComponentWrapper.wrapper [every bit _renderValidatedComponent] (react.js:12513) at ReactCompositeComponentWrapper.performInitialMount (react.js:5761) at ReactCompositeComponentWrapper.mountComponent (react.js:5692) at ReactCompositeComponentWrapper.wrapper [as mountComponent] (react.js:12513) at Object.mountComponent (react.js:13175) at ReactDOMComponent.mountChildren (react.js:11891) at ReactDOMComponent._createInitialChildren (react.js:7055) /favicon.ico Failed to load resource: the server responded with a status of 404 (Not Establish)
five Answers
I think you lot're getting some sort of bounden issue with the "this" keyword in your counter. I'g referencing the workspace I have for this class, simply the lawmaking is much different because I finished the course.
Try simply using "props.score" instead of "this.props.score"
I would maybe wait into updating the syntax for the counter form. I would modify it from a grade to a function, for me this is merely more than explicit with the intentions of the component. it would wait similar to the syntax of your histrion component and allows y'all to pass the props component explicitly.
const Counter = ( props ) => { render ( < div className = "counter" > < button className = "counter-action decrement" > - < /push> < div className = "counter-score" > { this . score } < /div> < button className = "counter-action increment" > + < /push button> < /div> ); }; Counter . propTypes = { score : React . PropTypes . number . isRequired , }
I opted to use form Counter extends React.Component instead of const Counter = React.createClass(). This fixed the trouble with this non beingness defined.
const PLAYERS = [ { proper name: "Matt Anderson", score: 19, id: ane }, { proper name: "Josh Waitzkin", score: 420, id: 2, }, { proper noun: "Ray Bradburry", score: 666, id: three, } ]; const Header = (props) => { return( < div className = "header" > < h1 >{props.title}</ h1 > </ div > ); } Header.propTypes = { title: React.PropTypes.string.isRequired, }; //const Counter = React.createClass({ // propTypes: { // score: React.PropTypes.number.isRequired, // }, // render: () => { // return ( // < div className = "counter" > // < button className = "counter-action decrement" > - </ push button > // < div className = "counter-score" > {this.props.score} </ div > // < button className = "counter-action increment" > + </ button > // </ div > // ); // } //}); class Counter extends React.Component { constructor(props) { super(props); } render() { return( < div className = "counter" > < push button className = "counter-action decrement" > - </ push > < div className = "counter-score" > {this.props.score} </ div > < button className = "counter-action increase" > + </ push button > </ div > ); } } Counter.propTypes = { score: React.PropTypes.number.isRequired, }; const Histrion = (props) => { return( < div className = "player" > < div className = "player-name" > {props.name} </ div > < div className = "player-score" > < Counter score = {props.score}/ > </ div > </ div > ); }; Player.propTypes = { name: React.PropTypes.string.isRequired, score: React.PropTypes.number.isRequired, } function Application(props) { return ( < div className = "scoreboard" > < Header title = {props.title}/ > < div className = "players" > {props.players.map((player) => { return < Player proper noun = {histrion.name} score = {player.score} key = {player.id}/ > })} </ div > </ div > ); } Application.defaultProps = { title: "Scoreboard", players: React.PropTypes.arrayOf(React.PropTypes.shape({ name: React.PropTypes.cord.isRequired, score: React.PropTypes.number.isRequired, id: React.PropTypes.number.isRequired, })).isRequired, }; ReactDOM.return(< Application players = {PLAYERS}/ >, certificate.getElementById('container')); 
I had a similar error due to mistakenly adding "this" to the incorrect function by mistake.
Hiya in that location! You're receiving the error coz props arent divers. Your Player component needs a props checking or propTypes validation. The proper name and score needs a validation for propTypes. Do that and you're good to go. (:
~ Ari
Source: https://teamtreehouse.com/community/typeerror-cannot-read-property-props-of-undefined
Post a Comment for "Destiny 2 Steam Transfer Cannot Read Props of Undefined"