React Native OnPress

JavaScript
1

I don’t know if anyone is familiar with react native here but I am having trouble getting the id of the touched element. I have tried e.target.id and e.currentTarget.id and have also tried using value and key but everything is showing up undefined. I am really new to react native so I am not sure what is going wrong.

Here is my code:

return (
                              <View>
                                <TouchableOpacity key={index} disabled={disable} onPress={handleClick} id={index}>

                                  <Image
                                         style={styles.image}
                                                 source={{
                                                   uri: picArray[index]
                                                 }}
                                               />
                                               </TouchableOpacity>
                              </View>
                          )
                      })}


                  </View>

 const handleClick = (e) => {
      let card = e.currentTarget.id
      console.log(e.currentTarget.key)
      console.log('hello')
      /*
      if (clickedOn.indexOf(card) != -1 && clickedOn.length > 0) {
        setLoose("true")
      }


      if (clickedOn.indexOf(card) == -1 || clickedOn.length == 0) {
        setClickedOn((clickedOn) => ([...clickedOn, card]));
      }
*/
    }
2

In React Native, TouchableOpacity doesn’t have an id property like HTML elements do. You can’t directly access an id attribute on a React Native component. Instead, you can pass custom props to the component to identify it.

You’re already passing a key prop, but you can’t access it using e.currentTarget.key because key is a special prop in React used for reconciliation and isn’t accessible like regular props.

To identify the touched element, you can pass an additional prop like index or cardId to the TouchableOpacity and access it in the handleClick function. Here’s how you can modify your code:

return (

{picArray.map((item, index) => {
return (
<TouchableOpacity
key={index}
disabled={disable}
onPress={() => handleClick(index)} // Pass index to handleClick
cardId={index} // Pass index as a custom prop
>
<Image
style={styles.image}
source={{
uri: item
}}
/>

);
})}

);

const handleClick = (cardId) => { // Receive cardId instead of event
console.log(cardId); // Access cardId directly
console.log(‘hello’);
// Other logic…
}

3

Yeah thanks got it working i have only started learning react native a few days ago so I am still getting the hang of it.

this worked for me:

return (
              <>
                  <View>
                      {randomArray.map((index) => {

                          return (
                              <View>
                                <TouchableOpacity key={index} disabled={disable} onPress={() => handleClick(index)} >
                                  <Image
                                  id={index}
                                         style={styles.image}
                                                 source={{
                                                   uri: picArray[index]
                                                 }}
                                               />
                                               </TouchableOpacity>
                              </View>
                          )
                      })}


                  </View>

 const handleClick = (index) => {
      //let card = e.currentTarget.id
      console.log(index)
      console.log('hello')
      /*
      if (clickedOn.indexOf(card) != -1 && clickedOn.length > 0) {
        setLoose("true")
      }


      if (clickedOn.indexOf(card) == -1 || clickedOn.length == 0) {
        setClickedOn((clickedOn) => ([...clickedOn, card]));
      }
*/
    }
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.