Pfthb

I'm experiencing a strange issue where the onPress function of a functional child component is triggered whenever the component is rendered.

Relevant parent code which renders the child component from a list of dates. I was also having issues with array.map if the component was a class component, but that's a separate issue.

return list_items.map(data => 
 <ChildComponent 
 key=data.day
 props=data
 />);

And the child component:

const ChildComponent = ( props ) => {
 let date = props.date;
 const someFunction = () => 
 console.log(date)
 
return (
 <Text><Icon name="angle-right" onPress=someFunction()/></Text>
)

And what I get from the console upon rendering the relevant scene:

2018-11-11

2018-11-12

2018-11-13

2018-11-14

2018-11-15

2018-11-16

Pressing the icon does nothing, yet it seems to run the function as if it was a lifecycle component. I've also moved the function into the parent component and passed it to the child as recommended per Guruparan Giritharan, and it still executes on render.

return list_items.map(data => 
 <ChildComponent 
 key=data.day
 props=data
 someFunction=this.someFunction // function now within parent component
 />);

And the updated child:

const ChildComponent = ( props, someFunction ) => 
 return (
 <Text>
 <Icon name="angle-right" onPress=someFunction(props.date)/> 
 </Text>
 )

Change to

<Text><Icon name="angle-right" onPress=someFunction/></Text>

You are calling the function there itself instead of passing the reference. So the function is called inside each render instead of onPress.