React.js Retrieving data from specific row

Question

i created a table in React.js, also I use Firebase for data storage, here is my table code

{tableData.map((row, index) => {
    return (
        <tr key={row + index}>
            {row.map((cell, index) => {
                return (
                    <td key={"cell_" + index} onClick={() => this.handleClick(this.state.userSurname)}>{cell}</td>
                );
            })}
        </tr>
    );
})}

and here is my this.setState:

componentDidMount() {
    db.onceGetUsers().on("child_added", snap =>{
                var username = snap.child("name").child("name").val();
                var surname = snap.child("name").child("surname").val();
               this.setState({ users: this.state.users.concat([username])});
               this.setState({ userSurname: this.state.userSurname.concat([surname])})
    })
  }

Here is my handleClick function:

  handleClick(event){
    alert(event)
}

So.. here is my problem, alert dialog displays every user surname, and what I'm trying to do is to display surname of user that is clicked in table.. how can i do that? :)

only usernames, now onClick on username i want to display clicked user surname :) — jj.badweyn
– jj.badweyn, Commented Apr 27, 2018 at 18:51
maybe instead of having two state variables for username and surname, you can have one state variable consisting of an array of user objects. — Ali Ankarali
– Ali Ankarali, Commented Apr 27, 2018 at 18:52

Ali Ankarali · Accepted Answer · 2018-04-27 19:16:30Z

2

You can achieve it like this, if you don't want to change your state structure:

handleClick(i){
    alert(this.state.userSurname[i])
}

{tableData.map((row, i) => {
    return (
        <tr key={row + i}>
            {row.map((cell, k) => {
                return (
                    <td key={"cell_" + k} onClick={() => this.handleClick(i)}>{cell}</td>
                );
            })}
        </tr>
    );
})}

edited Apr 27, 2018 at 19:16

answered Apr 27, 2018 at 19:00

Ali Ankarali

3,1773 gold badges22 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

jj.badweyn Over a year ago

I displays surname only from 1st username in array :)

Ali Ankarali Over a year ago

Yea because you have another index when you map row.

Ali Ankarali Over a year ago

Change the name of one of the indexes and their usage.

Peter Haddad · Accepted Answer · 2018-04-27 18:49:12Z

1

From the docs, child_added:

Retrieve lists of items or listen for additions to a list of items. This event is triggered once for each existing child and then again every time a new child is added to the specified path. The listener is passed a snapshot containing the new child's data.

To display surname of only the user that clicked in table, you need to read data once, example:

db.onceGetUsers().once('value').then(snap)=> {
var username = snap.child("name").child("name").val();
var surname = snap.child("name").child("surname").val();
});

once

Listens for exactly one event of the specified event type, and then stops listening.

more info here:

https://firebase.google.com/docs/reference/js/firebase.database.Reference#once

answered Apr 27, 2018 at 18:49

Peter Haddad

81.2k26 gold badges148 silver badges149 bronze badges

2 Comments

jj.badweyn Over a year ago

When i try to retrieve data this way, once('value', snap=>{ whole retrieved data is null :)

Peter Haddad Over a year ago

@jj.badweyn

db.onceGetUsers().once('value').then(snap)=> { snap.forEach(childs)=> { var username = childs.child("name").child("name").val();});

Collectives™ on Stack Overflow

React.js Retrieving data from specific row

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related