shouldComponentUpdate problem with the exercise (3/7)

<PLEASE USE THIS TEMPLATE TO HELP YOU CREATE A GREAT POST!>

<Below this line, add a link to the EXACT exercise that you are stuck at.>
My issue is 100% identical to shouldComponentUpdate exercise has something wrong(3/7) however that post was closed and unanswered.

<Below this line, in what way does your code behave incorrectly? Include ALL error messages.>

```

Replace this line with your code.

<do not remove the three backticks above>

The issue is closed because the refresh of the page solved the problem.
First try a refresh.
Second, try this code:
var React = require(‘react’);

var Example = React.createClass({
getInitialState: function () {
return { subtext: ‘Put me in an

please.’ };
},

shouldComponentUpdate: function (nextProps, nextState) {
if ((this.props.text == nextProps.text) &&
(this.state.subtext == nextState.subtext)) {
alert(“Props and state haven’t changed, so I’m not gonna update!”);
return false;
} else {
alert(“Okay fine I will update.”)
return true;
}
},

render: function () {
return (


{this.props.text}


{this.state.subtext}



);
}
});

It should work just fine.

I have tried refreshing the page multiple times and I also tried clearing my cache. I tried making a Target.js file with that code and I still had issues.

Would someone be willing to post the original code for me for Target.js so I can try creating a new Target.js from scratch and see if that works. Thank you.

Did you try the above code?

The target.js file is below:

var React = require(‘react’);
var random = require(’./helpers’).random;

var Target = React.createClass({
propTypes: {
number: React.PropTypes.number.isRequired
},
shouldComponentUpdate: function (nextProps, nextState) {
return this.props.number != nextProps.number;

},
render: function () {
var visibility = this.props.number
? ‘visible’ : ‘hidden’;
var style = {
position: ‘absolute’,
left: random(100) + ‘%’,
top: random(100) + ‘%’,
fontSize: 40,
cursor: ‘pointer’,
visibility: visibility
};

return (
  <span 
    style={style} 
    className="target" >
    {this.props.number}
  </span>
)

}
});

module.exports = Target;

I have tried both of the posted scripts and I cannot get either of them to work for me.

Hello,

Did you solve the issue?

No, I haven’t I decided to just move on and hope that they will one day fix the issue or help me with it. I appreciate your help though.

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