My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more

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.