Parenthesis after function as property


#1

https://www.codecademy.com/en/courses/react-101/projects/random-color

I’ve noticed that when we are calling “this.isLight()” it requires parenthesis however the event handler does not - “this.handleClick”.
Why is this?

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

var Random = React.createClass({
  getInitialState: function () {
    return {
      color: [0, 0, 0]
    };
  },
  
  handleClick: function () {
    this.setState({
      color: this.chooseColor()
    })
  },
  
  componentDidMount: function () {
    this.applyColor();
  },

  componentDidUpdate: function (prevProps, prevState) {
    this.applyColor();
  },

  formatColor: function (ary) {
    return 'rgb(' + ary.join(', ') + ')';
  },

  isLight: function () {
    var rgb = this.state.color;
    return rgb.reduce(function(a,b){ return a+b; }) < 127 * 3;
  },

  applyColor: function () {
    var color = this.formatColor(this.state.color);
    document.body.style.background = color;
  },

  chooseColor: function () {
    for (var i = 0, random = []; i < 3; i++) {
      random.push(Math.floor(Math.random()*256));
    }
    return random; 
  },

  render: function () {
    return (
      <div>
        <h1 className={this.isLight() ? 'white' : 'black'}>
					Your color is {this.formatColor(this.state.color)}!
        </h1>
        <Button	onClick={this.handleClick} light={this.isLight()} />
      </div>
    );
  }
});

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



#2

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