Sign in
Log inSign up

Why some returns in React use round brackets while some use curly brackets?

Default profile photo
Anonymous
·Apr 28, 2018

I'm new to learning React and have only basic to Intermediate JavaScript skills. Stateless functions in react use returns with round brackets () like,

function Player(props) {
  return (
    <div className="player">
      <div className="player-name">
        {props.name}
      </div>
      <div className="player-score">
        <Counter score={props.score} />
      </div>
    </div>
  );
}

Notice the () (curly brackets) used with return.

Then in the blow example, one of the class method (render) uses a return with the same round brackets, but the other method (getInitialState) uses a return with curly brackets.

var Counter = React.createClass({
  propTypes: {
    score: React.PropTypes.number.isRequired,
  },

  getInitialState: function() {
    return {
      score: 0,
    }
  },

  render: function () {
    return (
      <div className="counter">
        <button className="counter-action decrement"> - </button>
        <div className="counter-score"> {this.props.score} </div>
        <button className="counter-action increment"> + </button>
      </div>
    );
  }
});

Why is it like that? Please help me.