Calling functions in render method

Question

render()  {
            return (
                <div>
                    <input type="checkbox" onChange={this.flipPlongeur}/>
                    <h2>Omega {this.stringPlongeur()}}</h2>
                </div>
            );
}

I cannot understand why for the this.stringPlongeur() I need the parenthesis to display anything, whereas if I put them in this.flipPlongeur I get Error: "Cannot Update during an existing state transition." My prior experience consists of Java, where I always call functions using the parentheses ()

You probably update the state in one of these functions.. can you show us? — Carmelo Catalfamo
– Carmelo Catalfamo, Commented Sep 21, 2017 at 13:05

Mayank Shukla · Accepted Answer · 2017-09-21 13:31:59Z

Difference is big, In short one is returning function and one is returning value.

In first case: onChange={this.flipPlongeur}

You are assigning the function as a event handler, it will get called whenever you change anything in input element.

Check the doc Handling events with JSX.

In second case: {this.stringPlongeur()}

You are returning something from that function and rendering that value inside JSX, that will similar to directly writing something inside render method. To make the code clean we generally write the functions and return elements from that.

If I put () in this.flipPlongeur I get Error, Why?

Because if you put that () that means you are calling that function directly without changing anything in input element, and i think you are doing setState inside that's why it is throwing the error.

It is creating a Infinite loop because of setState, react re-render the component after setState:

render     ------>     flipPlongeur()     ------> setState() --->
    ^                                                           |
    |                                                           |
    |                                                           |
    ____________________________________________________________|

Check this snippet:

function abc(){
   return 1;
}

console.log('abc = ', abc);

console.log('abc() = ', abc());

Murat Karagöz · Accepted Answer · 2017-09-21 13:08:52Z

2

You can use {} in JSX generally for expressions. If you leave it off it will be printed as a plain text. This is for your h2 tag.

For the onChange prop you pass it as a event handler rather than a function call. You could pass it as a function call by using the syntax

onChange={(event) => this.flipPlongeur(event, additionalProps)}

And lastly you should not do any setState calls which results in re-rendering and setting another state. See the React guide on how to handle events

https://facebook.github.io/react/docs/handling-events.html

and for the state lifecycle

https://facebook.github.io/react/docs/state-and-lifecycle.html

answered Sep 21, 2017 at 13:08

Murat Karagöz

37.8k16 gold badges82 silver badges114 bronze badges

Comments

bennygenel · Accepted Answer · 2017-09-21 20:50:00Z

You are actually right. Parenthesis do actually cause function to execute. Difference between usage is that when you use onClick={this.flipPlongeur} you are passing function as a parameter to onClick prop for later execution when the click event happen.

You can think it in a simple way like a callback function passing to another function.

var function1 = function(callback) {
  if (typeof callback === 'function') callback(); 
}

var funtion2 = funtion() {
  alert('funtion1 fired');
}

function1(function2);

// this would be equal to writing it like this

function1(funtion() {
  alert('funtion1 fired');
})

When you use it like onClick={this.flipPlongeur()} you are executing the function right away as the code renders. This is equal to writing it like this,

onClick={ function() { alert('some random string')}() }

So when you use this.stringPlongeur() you want the function to execute right away and return the results or make the changes it does right away.

onClick prop expects a function and executes it with a event parameter when the click event happens on that element.

You can use couple of different ways to pass a function to onClick or any other prop that expects a function.

onClick={this.flipPlongeur} // this would pass the function itself as a parameter
onClick={() => { this.flipPlongeur(); }} // this would create a second function that executes this.flipPlongeur function

Hope this helps you to understand couple of things.

For your error, it is related to executing a function that changes the state of the component while the component is being rendered. This would create a infinite loop so it is not allowed.

Collectives™ on Stack Overflow

Calling functions in render method

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related