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

<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.>
https://www.codecademy.com/en/courses/react-101/lessons/this-state/exercises/call-setstate-another-function?user_id=546d15408c1cccad0c005b56

<Below this line, in what way does your code behave incorrectly? Include ALL error messages.>
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 });

},

<do not remove the three backticks above>

I’m having the same exact problem…

Remove the ’ ’ from your yellow, green, yellow,

4 Likes

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

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 (
<div style={{background: this.state.color}}>


Change my color



Change color


);
}
});

ReactDOM.render(, document.getElementById(‘app’));

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 (
<div style={{background: this.state.color}}>


Change my color



Change color


);
}
});

ReactDOM.render(, document.getElementById(‘app’));

*/

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

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 (
<div style={{background: this.state.color}}>


Change my color



);
}
});

ReactDOM.render(

document.getElementById(‘app’)
);

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

this.setState({ color: newColor });

differentiate between function name and var name, it will pass

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')
);
```

Your missing the var React = require(‘react’);

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

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'));

Somehow your code worked fine, lol. THANKS!!

1 Like

Haha, not a problem :slight_smile:

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