How to do a this with a component in react native?

Question

I am working with react native and expo.cli and would like to know how I can manage to add a handle to a TouchableOpacity, I have the following component:

function MainModal (){
return(
    <>
      <View style={{flexDirection: 'row'}}>
        <TouchableOpacity
            onPress={this.TouchableOpacity}
            > 
            <Text>Volver</Text>
        </TouchableOpacity>

      </View>
    </>

What I want to do is make a reference to this specific TouchableOpacity when it is selected, but when I use a "this" nested in the component I get the following error: Undefined is not an object (Evaluating 'this.TouchableOpacity') I know maybe This question is a bit of a novice and has more to do with how 'this' works in javascript than with React Native itself, however I can't find a way to make a reference to the selected object so that it executes something when selected. How could I do it?

Answer 1

You can use React.useRef() hook to create a reference to that element so you can access then to it. The idea you have of this is not the actual this . This might refer to the global object (in not strict) and might be undefined in strict mode. If you want to use this in a component I recommend you to create a class component instead of a function one. See this in MDN to learn more of it. Anyway, the use of ref in a functional component would be this:

function MainModal (){

const touchableReference = React.useRef()

const handleTouchableClick = () => {
  console.log(touchableReference.current)
  //
  // Outputs HTMLDivElement...
  //
}

return(
    <>
      <View style={{flexDirection: 'row'}}>
        <TouchableOpacity
            ref={touchableReference}
            onPress={() => handleTouchableClick()}
            > 
            <Text>Volver</Text>
        </TouchableOpacity>

      </View>
    </>
  )
}

Answer 2

One standard way of passing event handler in functional component is as follows

function MainModal (props){
const onPress1 = useCallback(()=>console.log); // created inside the componet
const {onPress2} = props; // passed from props
const {onPress3} = useSomeHook(); // from context/hook
return(
    <>
      <View style={{flexDirection: 'row'}}>
        <TouchableOpacity
            onPress={onPress1}
            > 
            <Text>Volver</Text>
        </TouchableOpacity>
        <TouchableOpacity
            onPress={onPress2}
            > 
            <Text>Volver</Text>
        </TouchableOpacity>
        <TouchableOpacity
            onPress={onPress3}
            > 
            <Text>Volver</Text>
        </TouchableOpacity>
      </View>
    </>
);
}

The behaviour of this works the same in react and react-native. React functional component is executed during the render phase and you are not suppose to work with this here, given that you do not understand when and where it is called.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this