React BootstrapTable how to dynamically create rows for firebase data

Question

Hi guys im making web app where im bulding table, here is the code for it:

class Table1 extends Component {
  render() {
    return (
      <div>
        <BootstrapTable data={this.props.data}>
          <TableHeaderColumn isKey dataField='id'>
          </TableHeaderColumn>
          <TableHeaderColumn dataField='name'>
          </TableHeaderColumn>
          <TableHeaderColumn dataField='value'>
          </TableHeaderColumn>
        </BootstrapTable>
      </div>
    );
  }
}

export default Table1;

then in my index.js file i use this to get data from firebase and put it to table

 db.onceGetUsers().on("child_added", snap =>{
                var username = snap.child("name").child("name").val();
  this.setState({users: username})

and here is how i pass data to table:

  render() {
    var data = [
      {name: this.state.users}
    ];
    return (
      <body  className = "aa">
       <div >
        <div className = "bb">
         <Table1 data={data}/>
        </div>
       </div>
     </body>

and it displays data.. but only in one row. When I'm debbuging it, theres only one row where appears 1st username then it dissapears and 2nd username appears, and it goes like that, then at the end it displays last username, and this all happens in only one cell in column "name", how can i solve that ?

score 1 · Accepted Answer · answered Apr 21 '18 at 15:11

1

Your on("child_added" will be called for every user. This means that you'll want to take the user from the snapshot and add it to some collection that you then display in your HTML.

I quickly looked at how to add an item to an array in state, and it seems this is idiomatic:

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

In the above fragment we add the new user to the existing array of users. Be sure to initialize the array in getInitialState. E.g.

getInitialState: function() {
    return {
        users: []
    };
}

answered Apr 21 '18 at 15:11

Frank van Puffelen

565,676
79
828
807

it works, it displays all of the usernames, but only in one cell, like: "username1,username2,username3" what do i really try to do is to display every username in seperate row, like in jQuery "" i need it because later i want make onClick function for table items, is this even a good way to create this kind of table? Maybe should i aim for something different way to create table? Thanks for your time by the way :) – jj.badweyn Apr 21 '18 at 17:31
Something like [this](https://stackoverflow.com/questions/39137647/build-a-dynamic-table-using-array-data-generated-from-php-in-jsx-react) should do the trick for that. – Frank van Puffelen Apr 21 '18 at 18:11

React BootstrapTable how to dynamically create rows for firebase data

1 Answers1