How to target the node instead of the node number with an onPress

Question

I have a bunch of users who are being rendered into <StatusSphere/> components in the <ListView/>.

When I click on each of the <StatusSpheres/> I would like their individual uid's to print to the console (so I can further manipulate them).

This is where I'm having trouble; on React I would use e.target.value, or even could use getAttributes. But here all I am getting back is a number (for example 237 or 248.. etc) which I believe is the node number?

I have found another source that says you can use:

var ReactNativeComponentTree =require('react/lib/ReactNativeComponentTree'); ReactNativeComponentTree.getInstanceFromNode(nativeTag);

but that didn't work for me and seems weird anyway.

How can I easily access the uid which is already stored on the actual component? There must be a straightforward way that I haven't come across.

Many thanks

export default class UserList extends Component {
  constructor() {
    super();
    this.userRef = firebase.database().ref().child('users')
    this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})
    this.state = {
      users: this.ds.cloneWithRows([])
    }
  }
  componentWillMount() {
    //Checks my firebase database for the users and pushes it into the this._users array....
    this._users = []
    this.userRef.on('child_added', snap => {
      this._users.push({
        user: snap.val().username,
        isOnline: snap.val().isOnline,
        isChatter: snap.val().isChatter,
        uid: snap.val().uid
      });
      //...which then gets passed into this function...
      this.populateUsers(this._users);
    }).bind(this);
  }
  populateUsers(nodes) {
    //which then populates the state with the databases' users, which is then automatically rendered in the listview below
    this.setState({users: this.ds.cloneWithRows(nodes)});
  }
  _toChat(e) {
    console.log('************ native target *************');
    console.log(e.target);
    console.log('************ native target *************');
  }
  render() {
    return (
      <ListView
        horizontal
        enableEmptySections={true}
        dataSource={this.state.users}
        renderRow={d => <StatusSphere onPress={this._toChat}
                                      uid={d.uid}
                                      user={d.user}
                                      isOnline={d.isOnline}
                                      isChatter={d.isChatter}/>}/>
    )
  }
}

Burak Karasoy · Accepted Answer · 2017-07-26T07:55:37.510

2

I'm not sure I have understand your question but ;

you can call toChat method with extra parameter using arrow function.

onPress={(e)=>{this._toChat(e,d.uid)}}

edited Jul 26 '17 at 07:55

answered Nov 08 '16 at 19:38

Burak Karasoy

1,682
2
21
33

Oh god, 3 hours of trying and that was the answer.. thanks dude ! :) – WillKre Nov 08 '16 at 19:41
No, this is very poorly documented so people keep doing it and keep recommending others to do it. But you should never use `bind` or arrow functions within JSX/with `render` because they each create a new function every time. Creating a new function right here actually modifies your component's state and as you know, React components re-render only components with state changes. It's one of the main reasons we use React. This doesn't matter a whole lot for a single component but will cause problems quickly when you need to generate arrays of components, such as using `map` to make `ListItem`s. – hippietrail Sep 23 '17 at 02:59
See: https://stackoverflow.com/questions/36677733/why-jsx-props-should-not-use-arrow-functions – hippietrail Sep 23 '17 at 03:00

How to target the node instead of the node number with an onPress

1 Answers1

Linked