'm learning native react and learning more about javascript, so I still do not understand many things about its behavior. I have created a button ponent, using TouchableOpacity, and its props onPress. For it to work, I must send the function I want to execute as a props, but here I have fallen due to my little experience.

I am sending a console.log that is activated when I press the button. So I passed the console.log directly in the props that I defined, but it did not work when I clicked on the button, but, it was executed when the code is initialized. On the other hand, when I have passed an arrow function that contains the console.log, it has been executed at the moment of clicking the button.

to make it clearer I'll show my code:

this is my button ponent:

const Button = ({ onUserPress, children, color }) => {

    const state = {

    };
    return (
        <TouchableOpacity onPress={ onUserPress } style={styles.buttonStyle} >
            <Text style={styles.textStyle}>
                {children}
            </Text>
        </TouchableOpacity>
    );
};

and i call them like this:

<Button onUserPress={ console.log("hello") }>Something</Button>

This is executed at the time of initializing my application, and nothing is happened when the button is pressed.

on the other hand, when i use the same ponent, but i pass the console.log in arrow function, like this:

<Button onUserPress={ ()=>{console.log("hello")} }>Something</Button>

this execute the console log only when i press the button ponent.

Could someone explain to me why the behavior is different? The world of functional programming is totally new to me and these things seem strange to me. According to what I understand, both are functions, so for me they do not make a difference (obviously, from my ignorant point of view). What is the difference that makes the behavior different?

'm learning native react and learning more about javascript, so I still do not understand many things about its behavior. I have created a button ponent, using TouchableOpacity, and its props onPress. For it to work, I must send the function I want to execute as a props, but here I have fallen due to my little experience.

I am sending a console.log that is activated when I press the button. So I passed the console.log directly in the props that I defined, but it did not work when I clicked on the button, but, it was executed when the code is initialized. On the other hand, when I have passed an arrow function that contains the console.log, it has been executed at the moment of clicking the button.

to make it clearer I'll show my code:

this is my button ponent:

const Button = ({ onUserPress, children, color }) => {

    const state = {

    };
    return (
        <TouchableOpacity onPress={ onUserPress } style={styles.buttonStyle} >
            <Text style={styles.textStyle}>
                {children}
            </Text>
        </TouchableOpacity>
    );
};

and i call them like this:

<Button onUserPress={ console.log("hello") }>Something</Button>

This is executed at the time of initializing my application, and nothing is happened when the button is pressed.

on the other hand, when i use the same ponent, but i pass the console.log in arrow function, like this:

<Button onUserPress={ ()=>{console.log("hello")} }>Something</Button>

this execute the console log only when i press the button ponent.

Could someone explain to me why the behavior is different? The world of functional programming is totally new to me and these things seem strange to me. According to what I understand, both are functions, so for me they do not make a difference (obviously, from my ignorant point of view). What is the difference that makes the behavior different?

• javascript
• react-native
• ecmascript-6

Share Improve this question Follow asked Feb 12, 2019 at 14:57 kmilo93sdkmilo93sd 90133 gold badges1717 silver badges3939 bronze badges 2

• 1 console.log("hello") is a function call in it.. ()=>{console.log("hello")} is a function definition – Suraj Rao Commented Feb 12, 2019 at 15:00
• The first one looks like a typo. I don't think it was intentional. – Denys Séguret Commented Feb 12, 2019 at 15:00

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

You aren't paring a "normal function" with an arrow function.

The content between { and } is an expression which is evaluated and the result is assigned to the prop.

Thus you are calling console.log("hello"), taking the return value and assigning that as a function to onUserPress (this makes no sense as the return value of console.log is not a function).

---

Not a function:

console.log("hello");

If you don't want use arrow function you need to pass a regular function: onUserPress={ function(){console.log("hello")}.

Also, you can pass onUserPress={console.log}, in this case, console.log will receive an event object as a parameter.

Difference in function(){console.log("hello") and () => console.log("hello") that in second case "this" will be pointed to your ponent

1-> <Button onUserPress={ console.log("hello") }>Something</Button>
2-> <Button onUserPress={ () => console.log("hello") }>Something</Button>

in first : you're calling the console.log("hello") , where as in 2nd you're returning console.log("hello")

so its similar to

const functionCall = ()=>{ do something... }

    const x = document.getElementById("root")
    x.addEventListener("click",functionCall())  <--- WRONG!!!

in the above case it will CALL the function,even before you press the input/button which is "called" inside the 2nd parameter.

Rather

x.addEventListener("click",functionCall) <---- Correct it executes the function when you click the button/input