Get the key value when i click the respective TouchableOpacity from mapping an array

user_15898239 0
Viewed 80

Im new to react native and im doing an internship but noone can really help me and i've been stuck with this for a while, my question is, im mapping an array that will basicly list news from an api each in a rectangle with title, subject and date. Everything is working but i wanted to click a rectangle for example so it shows more of that specific new but i dont know if there is any way i can store the key value in a variable so i can get the right coordinates of the array

{this.state.noticias.map((noticias, i) => (
  (this.state.noticias[i][0] && this.state.noticias[i][1] && this.state.noticias[i][2]) == "" ?
    <View key={i}></View> :
    <TouchableOpacity style={styles.noticiaContainer} key={i}
       onPress={this.mostrarNoticia.bind(this)} >
       <View style={{ borderBottomWidth: 1, borderColor: '#0e62a5', }}>
         <Text style={styles.tituloNoticia}>{noticias[0]}</Text>
       </View>
    <Text style={styles.assuntoNoticia}>{noticias[1]}</Text>
    <Text style={styles.dataNoticia}>{noticias[2]}</Text>
  </TouchableOpacity>
))}
react-native javascript
1 Answers

The second argument to bind is the set of arguments to pass into the new function, so in your code where you're mapping each of your 'noticias', you're creating a new function with bind, and passing in the current 'this' value as the first parameter, but not passing in any variables.

Observe the amendment I have made to your code below, I have passed in both the 'noticias' and 'i' values as the 2nd & 3rd parameters to the bind function call.

{this.state.noticias.map((noticias, i) => (
  (this.state.noticias[i][0] && this.state.noticias[i][1] && this.state.noticias[i][2]) == "" ?
    <View key={i}></View> :

    <TouchableOpacity 
       style={styles.noticiaContainer} 
       key={i}
       onPress={this.mostrarNoticia.bind(this, noticias, i)} >

       <View style={{ borderBottomWidth: 1, borderColor: '#0e62a5', }}>
         <Text style={styles.tituloNoticia}>{noticias[0]}</Text>
       </View>
    <Text style={styles.assuntoNoticia}>{noticias[1]}</Text>
    <Text style={styles.dataNoticia}>{noticias[2]}</Text>

  </TouchableOpacity>

))}

Taking the above modification I've stubbed out an example function signature for 'mostrarNoticia', along with the fix for bind should look something like below.

import React from "react";
class YourComponent extends React.Component {
    
    mostrarNoticia (noticias, index) {
        // Given you passed the values into the bind function,
        // they will be accessible here.

        console.log("noticias", noticias);
        console.log("index", index);
    }

    render () {
        return (
            <>
    {this.state.noticias.map((noticias, i) => (
      (this.state.noticias[i][0] && this.state.noticias[i][1] && this.state.noticias[i][2]) == "" ?
        <View key={i}></View> :
    
        <TouchableOpacity 
           style={styles.noticiaContainer} 
           key={i}
           onPress={this.mostrarNoticia.bind(this, noticias, i)} >

           <View style={{ borderBottomWidth: 1, borderColor: '#0e62a5', }}>
             <Text style={styles.tituloNoticia}>{noticias[0]}</Text>
           </View>
        <Text style={styles.assuntoNoticia}>{noticias[1]}</Text>
        <Text style={styles.dataNoticia}>{noticias[2]}</Text>

      </TouchableOpacity>
    
    ))}
</>
        );
    }
}

Basically, pass the variables into the function using the bind function you're already using.

user_17356530
Related