4. componentWillUpdate


#1

EXERCISE: LINK

ERROR MESSAGE:
"TypeError: Cannot read property 'game' of undefined
at [object Object].componentWillUpdate (TopNumber.js:18:36)
at Context. (test.js:23:26)"

This issue has been posted about before, but nobody has replied with an answer for it yet, which is why I'm re-submitting the "error", a few months later. Thanks in advance for your wonderful time & help!

CODE: (TopNumber.js)

var React = require('react');
var ReactDOM = require('react-dom');
var yellow = 'rgb(255, 215, 18)';

var TopNumber = React.createClass({
  propTypes: {
    number: React.PropTypes.number,
    game: React.PropTypes.bool
  },

  getInitialState: function () {
    return { 'highest': 0 };
  },
  
  componentWillUpdate: function (nextProps, nextState) {
    if (document.body.style.background != yellow && this.state.highest > 950*1000) {
      document.body.style.background = yellow;
    } else if (!this.props.game && nextProps.game) {
  document.body.style.background = 'white';
		}
  },

  componentWillReceiveProps: function (nextProps) {
    if (nextProps.number > this.state.highest) {
      this.setState({
        highest: nextProps.number
      });
    } else if (!this.props.game) {
      this.setState({
        highest: 0
      });
    }
  },

  render: function () {
    return (
      <h1>
        Top Number: {this.state.highest}
      </h1>
    );
  }
});

module.exports = TopNumbe
<do not remove the three backticks above>r;

#2

RESOLVED! For some reason the error was being triggered by a different area:

Here's the correction...

BEFORE:

componentWillUpdate: function (nextProps, nextState) {
    if (document.body.style.background != yellow && this.state.highest > 950*1000) {
      document.body.style.background = yellow;
    } else if (!this.props.game && nextProps.game) {
  document.body.style.background = 'white';
   }
},

AFTER:

componentWillUpdate: function (nextProps, nextState) {
    if (document.body.style.background != yellow && this.state.highest >= 950000) {
      document.body.style.background = yellow;
    } else if (!this.props.game && nextProps.game) {
  document.body.style.background = 'white';
   }
},

SEE: Second line of code for the difference.


#3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.