How should you be calling methods in react? Ravenous pt3

My problem is with how methods are being called and I’m not sure if this is react specific or just javaScript in general. if you check all the way below where the form is there’s a bunch of moments where I call my methods and inject them into render method. Why do some of the methods calls only work if it has () attached to the end and other method calls only work with out (). For example “this.renderSortByOptions()” has parentheses but "this.handleTermChange " doesn’t.

import React from 'react';
import './SearchBar.css';

class SearchBar extends React.Component {
  constructor(props) {

    this.state = {
      term: "",
      location: "",
      sortBy: 'best_match'

    this.sortByOptions = {
      "Best Match" : "best_match",
      "Highest Rated" : "rating",
      "Most Reviewed" : "review_count"

    this.handleTermChange = this.handleTermChange.bind(this);
    this.handleLocationChange = this.handleLocationChange.bind(this);
    this.handleSearch = this.handleSearch.bind(this);


  getSortByClass(sortByOption) {
    if(this.state.sortBy === sortByOption){
      return 'active';
    } else{
      return '';

  handleSortByChange(sortByOption) {
    this.setState({sortBy : sortByOption})

  handleTermChange(event) {

  handleLocationChange(event) {

  handleSearch(event) {

    renderSortByOptions() {
    return Object.keys(this.sortByOptions).map(sortByOption => {
      let sortByOptionValue = this.sortByOptions[sortByOption];
      return <li className={this.getSortByClass(sortByOptionValue)} onClick={this.handleSortByChange.bind(this,sortByOptionValue)} key={sortByOptionValue}>{sortByOption}</li>;

    render() {
      return (  <div className="SearchBar">
  <div className="SearchBar-sort-options">

**Why does this work only with parentheses**
  <div className="SearchBar-fields">
                                   **and why does this also work  but only without parenthesis?**
    <input onChange={this.handleTermChange} placeholder="Search Businesses" />
    {/* //check on this event listener if app doesn't work */}
    <input onChange={this.handleLocationChange} placeholder="Where?" />
  <div className="SearchBar-submit" onClick={this.handleSearch}>
    <a>Let's Go</a>

export default SearchBar;

A basic answer is when you use () after the function you are calling it there and then, so the side effect / result of that function will occur then.

When you do it without the () you are passing the function into something else to be called at a later date, when it decides it should - that maybe straight away or in the case of the events (onChange for example) it will be when the event occurs. You you are passing a reference to the function not the result. There cases you may still see () when passing into something else. In these cases either:

  1. The function is being called because it will then calculate the required value.
    2), It is a higher order function and will return a function themselves.


function scenario1() {
    let result = 10;
    // Maybe do some conditional logic to result.
    return result;

function scenario2() {
    return function (param) {
        // Do stuff with param

function DoStuffWithData (number) {
    return 10 + number;

function DoStuffWithAFunction (func) {


These examples are really simple, so not the best but show cases you will use () on a function when it is being passed into another function.

On that note, it is worth noting that with the onChange etc props on the elements the function you put in it are getting added to something else to be called at a later date. So here you want a reference to a function. this.renderSortByOptions() you want that to run right away because it is returning an element you want to be rendered.