CODEWITHSUNDEEP
reactjsstate
Kirk Ross
Kirk Ross

Reputation: 7153

React — not defined error?

This code actually works in my environment, and I'm actually trying to create a fiddle to ask a different question but need to solve this first...

Why is the console saying that 'favorited' is not defined?

FIDDLE 

class BtnFav extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favorited: false};
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState({favorited: !this.state.favorited});
  }
  render() {
    var favStatus = this.state.favorited ? 'btn-fav' : 'btn-notfav';
    return (
      <button className={favStatus} onClick={this.handleClick}>FAVORITE</button>
    );
  }
};

Upvotes: 0

Views: 47

Answers (1)

Michael Camden
Michael Camden

Reputation: 1218

The only error I was able to find was a misspelling of 'background'. In your original example you've specified: 

.btn-fav {
    backround-color: green;
}

.btn-notfav {
    backround: red;
}

The property is correctly spelled as background or background-color

See this updated example: https://jsfiddle.net/69z2wepo/49511/

Upvotes: 1

Related Questions