How do I make thefun.thefun a function?

Question

Technology: React-Native

Desired Result: I'm trying to pass a function between components. I want theFun.theFun() to call but it doesn't run:

Component Exception theFun.theFun is not a function. (In 'theFun.theFun("2", "1", "blueShrimp"). 'theFun.theFun' is undefined

What I've Tried: I've tried {storeMeaturement} vs {()=> storeMeasurement("2","1","blueShrimp"} vs { storeMeasurement("2","1","blueShrimp"} in the component definition and theFun={storeMeasurement} vs theFun={storeMeasurement("2","1","blueShrimp")} in the tag. I've tried other things too to no avail.

Here is the code:

Where I use the tag

<ModalPurpleCard theList={["10","91","thermometer"]}  theFun={storeMeasurement} ></ModalPurpleCard>

Where I define the tag

function ModalPurpleCard(theList:any, theFun:any ) {// , theFun:function

  let [visOpen, setVisOpen] = React.useState(true);
  let [stillLoad, setStillLoad] = React.useState(true);

  //let theFig = Math.round(Math.random() *10 + 90)
  let theFig = Number(theList.theList[0]) + Number(theList.theList[1])
  console.log(theFig)

  if (visOpen){
    return(
      <TouchableOpacity onPress={()=> setVisOpen(false)}>
        <View style={{zIndex:3}}>
          <ModalSecCard  >
            <Text style={{color:"#fff"}}>{theList.theList[2]}</Text>
          </ModalSecCard>
        </View>
      </TouchableOpacity>
    )

  } else{
      if(stillLoad){
        return(
          <TouchableOpacity onPress={theFun.theFun("2","1","blueShrimp")}>
          <ActivityIndicator animating={true} color="#333366"/>
          </TouchableOpacity>
        )
      } else {return(
        <Text>{theFig}</Text>
  )}
    
  }
  
}

Conclusion: The weird thing for me is that theList works great and successfully passes between components. The function, however, does not.

Answer 1

TRy this

function ModalPurpleCard(props) {// , theFun:function

  let [visOpen, setVisOpen] = React.useState(true);
  let [stillLoad, setStillLoad] = React.useState(true);

  //let theFig = Math.round(Math.random() *10 + 90)
  let theFig = Number(props.theList[0]) + Number(props.theList[1])
  console.log(theFig)

  if (visOpen){
    return(
      <TouchableOpacity onPress={()=> setVisOpen(false)}>
        <View style={{zIndex:3}}>
          <ModalSecCard  >
            <Text style={{color:"#fff"}}>{props.theList[2]}</Text>
          </ModalSecCard>
        </View>
      </TouchableOpacity>
    )

  } else{
      if(stillLoad){
        return(
          <TouchableOpacity onPress={() => props.theFun("2","1","blueShrimp")}>
          <ActivityIndicator animating={true} color="#333366"/>
          </TouchableOpacity>
        )
      } else {return(
        <Text>{theFig}</Text>
  )}
    
  }
  
}