CODEWITHSUNDEEP
reactjsmeteor
Kostiantyn Palianychka
Kostiantyn Palianychka

Reputation: 595

Render table when getting data asynchronous

I have some data which i get in state when componentDidMount. I am trying render table using this data. In my case rows not rendering. How i can send data to tbody ? 

export default class App extends Component {
  constructor(props) {
  super(props);
  this.state={rows:null}
}
  componentDidMount(){
    var rows=[]
    Meteor.http.call("GET", url ,function(error,result){
      $.each(JSON.parse(result.content), function(key, value){
        rows.push(value)
      });
    this.setState({
      rows:rows});
    })
  }
  renderRows(){
    $.each(this.state.rows, function(d){
      return(
        <tr>
          <td>{d[0]}</td>
          <td>{d[1]}</td>
          <td>{d[2]}</td>
          <td>{d[3]}</td>
        </tr>
        )
    })
  }
  render(){
    return(
      <Table>
        <thead>
          <tr>
            <th>col1</th>
            <th>col2</th>
            <th>col3</th>
            <th>col4</th>
          </tr>
        </thead>
        <tbody>
          {this.renderRows}
        </tbody>
      </Table>
    )
  }
}

Upvotes: 1

Views: 2167

Answers (2)

kkkkkkk
kkkkkkk

Reputation: 7748

renderRows is a function so you need to execute it. Also you will need to update that function a bit:

export default class App extends Component {
  // ...
  componentDidMount(){
    var rows=[];
    var self = this;
    Meteor.http.call("GET", url ,function(error,result){
      $.each(JSON.parse(result.content), function(key, value){
        rows.push(value)
      });

      self.setState({
        rows: rows
      });
    });
  }
  renderRows(){
    const rows = this.state.rows || [];

    return rows.map(d => {
      return(
        <tr>
          <td>{d[0]}</td>
          <td>{d[1]}</td>
          <td>{d[2]}</td>
          <td>{d[3]}</td>
        </tr>
      );
    });
  }
  render(){
    return(
      <Table>
        {/* ... */}
        <tbody>
          {this.renderRows()}
        </tbody>
      </Table>
    )
  }
}

Upvotes: 1

Phil Bellamy
Phil Bellamy

Reputation: 330

Another option, not using JQuery and avoiding having a separate render function, is to use .map

React likes it if you have a unique key on each element in a list, so hopefully one of the fields on your row can serve this purpose.

  render(){
        return(
          <Table>
            <thead>
              <tr>
                <th>col1</th>
                <th>col2</th>
                <th>col3</th>
                <th>col4</th>
              </tr>
            </thead>
            <tbody>
              {this.state.rows.map(d => (
                <tr key={d[0]}>
                  <td>{d[0]}</td>
                  <td>{d[1]}</td>
                  <td>{d[2]}</td>
                  <td>{d[3]}</td>
                </tr>
              )}
            </tbody>
          </Table>
        )
      }

You'll also need to set your initial state for rows to be [] rather than null, in order for the first render to work.

Upvotes: 1

Related Questions