5/7 Call this.setState from Another Function Part 4


#1


https://www.codecademy.com/en/courses/react-101/lessons/this-state/exercises/call-setstate-another-function?user_id=546d15408c1cccad0c005b56


cannot get the following code to pass, it is correct as far as i am concerned, please tell me what is wrong here


changeColor: function() {
    var changeColor = this.state.color == 'yellow' ? 'green' : 'yellow';
    this.setState({ color: changeColor });
    
  },


#2

I'm having the same exact problem...


#3

Remove the ' ' from your yellow, green, yellow,


#4

I have removed the single quotes with the same results, i have tried multiple different ways bit will not work, as well as running in Firefox, Safari and Chrome. The strange thing is nothing appears in the browser window, and only displays "https://localhost/ does not display localhost/8000 as i would expect it to. There have been several other unusual things happening, at random the system will prompt me "Are you still There", and it will happen several times in 1 hour, it appears there may be a bug in their system


#5

the "are you still there part" is just showing up when you stop being active on the current page, the browser window on the right side of screen needs to be refreshed separately at least in my case, to show updated output, and not sure what could be the main problem, here is my code that worked for me

var React = require('react');
var ReactDOM = require('react-dom')

var green = '#39D1B4';
var yellow = '#FFD712';

var Toggle = React.createClass({
getInitialState: function() {
return {color: green};
},

changeColor: function() {
var changeColor = this.state.color == yellow ? 			green : yellow;
this.setState({ color: changeColor });

},

render: function () {
return (



Change my color



Change color


);
}
});

ReactDOM.render(, document.getElementById('app'));


#6

oops. this one.

/*
var React = require('react');
var ReactDOM = require('react-dom')

var green = '#39D1B4';
var yellow = '#FFD712';

var Toggle = React.createClass({
getInitialState: function() {
return {color: green};
},

changeColor: function() {
var changeColor = this.state.color == yellow ? 			green : yellow;
this.setState({ color: changeColor });

},

render: function () {
return (



Change my color



Change color


);
}
});

ReactDOM.render(, document.getElementById('app'));

*/


#7

Im not sure why it wont let me copy-paste the code as it is, but changing it like this :smiley: :confused:


#8

I have copied the setState code section into mine and still will not pass, unfortunately cannot continue until 4 5 and 6 pass. here is the exact code it seems with this first 3 passed, but stuck on #4.

var React = require('react');
var ReactDOM = require('react-dom');

var green = '#39D1B4';
var yellow = '#FFD712';

var Toggle = React.createClass({
getInitialState: function () {
return { color: green };
},

changeColor: function() {
var changeColor = this.state.color == yellow ? green : yellow;
this.setState({ color: changeColor });
},

render: function () {
return (



Change my color



);
}
});

ReactDOM.render(

document.getElementById('app')
);


#9

changeColor:function(){
var newColor = this.state.color ==green ? yellow : green

this.setState({ color: newColor });

differentiate between function name and var name, it will pass


#10

This is ridiculous. I've tried like 40 times now and I can't see the problem with my code. Step 4 alwas fails and I don't even get an error. I've copy/pasted all of the written solutions above in this thread and nothing works for me.
Can anyone see a problem in this code:

var React = require('react');
var ReactDOM = require('react-dom');

var green = '#39D1B4';
var yellow = '#FFD712';

var Toggle = React.createClass({
  getInitialState: function() {
    return {color: green};
  },
  changeColor: function () {
    var newMood = this.state.color == green ? yellow : green;
    this.setState({ color: newMood });
  },
  render: function () {
    return (
      <div style={{background:this.state.color}}>
        <h1>
          Change my color
        </h1>
      </div>
    );
  }
});

ReactDOM.render(
	<Toggle/>
  document.getElementById('app')
);

#11

Your missing the var React = require('react');


#12

Thanks, but I had a misshap in my Markdown. It's there


#13

This works for me? Only difference is a space after background as far as I can see....

var React = require('react');
var ReactDOM = require('react-dom')

var green = '#39D1B4';
var yellow = '#FFD712';

var Toggle = React.createClass({
  getInitialState : function () {
    return { color: green }
  },
  changeColor: function () {
    var newColor = this.state.color == green ? yellow : green;
    this.setState({ color: newColor });
  },
  render: function () {
    return (
      <div style={{background: this.state.color}}>
        <h1>
          Change my color
        </h1>
      </div>
    );
  }
});

ReactDOM.render(<Toggle />, document.getElementById('app'));

#14

Somehow your code worked fine, lol. THANKS!!


#15

Haha, not a problem :slight_smile:


#16

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