React Native | Why is my function running immediately, rather than just onPress? - react-native

Question

I am just starting to grasp props in react native so I am hoping that this is a simple solution.
I want the state of the form to update to bring the user to the next page in the form and I want the state of the response to update as well - both when the user presses the button component (onPress).
However, what I'm seeing when I console.log is that the update state function is running immediately, rather than when the button is pressed - so it is going directly to the second "page" of the form.
Form Component
import React, {useState} from 'react';
import { View, Text} from 'react-native';
import Happiness from './Happiness';
const StarterForm = () => {
const [formStage, setFormStage] = useState(1)
const [happinessLevel, setHappinessLevel] = useState('')
console.log(formStage)
console.log(happinessLevel)
const increaseTheStage = (happiness) => {
setHappinessLevel(happiness)
setFormStage(formStage +1)
}
switch (formStage) {
case 1:
return (
<Happiness
passHappiness={increaseTheStage}
/>
)
case 2:
return (
<Text>This is the case of two</Text>
)
}
}
export default StarterForm;
Happiness component
import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
const Happiness = (props) => {
return (
<View>
<Text>Which of the following best classifies your happiness?</Text>
<TouchableOpacity onPress={props.passHappiness('Excellent')}>
<Text>Excellent</Text>
</TouchableOpacity>
</View>
)
}
export default Happiness;
Expected Results
I expect the following when the first screen opens:
console.log(formStage) = "1"
console.log(happinessLevel) = ""

Answer 1

Using anonymous functions
You are calling the function right away, switch it to this:
<TouchableOpacity onPress={() => props.passHappiness('Excellent')}>
Now you have created an anonymous function which calls passHappiness with the parameter 'Excellent' illustrated below:
() => props.passHappiness('Excellent')
Using bind
You can also use the bind method to "bind" the parameter "excellent" to the function
<TouchableOpacity onPress={props.passHappiness.bind(this,'Excellent')}>
More on the bind method here.