Rows not displayed when using .setState()

[cryptix]

Hi,

I must admit that I'm fairly new to react but after following the introductory comment tutorial I tried to wrap my knowledge around reactable and fill it with data by calling this.setState() but it only updates the column names and now rows show up.

Here is my code so far:

/** @jsx React.DOM */
var Table = Reactable.Table;

var TableController = React.createClass({
  render: function() {
    return (
      <div className="tblControlls">
        <h3>I am a table controller! <small>source selection/limiter/deletedfilter</small></h3>
      </div>
    );
  }
});


var TableBox = React.createClass({
  getInitialState: function() {
    return {data:[]};
  },
  componentDidMount: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      success:function(data) {
        console.log("Setting data - "+data.length + " items")
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  render: function() {
    return (
      <div className="tableBox">
        <TableController />
        <Table className="table table-striped" data={this.state.data}/>
      </div>
    );
  }
});



React.renderComponent(
    <TableBox url="TableData"/>
    ,document.getElementById('myTable')
);

I just installed the react dev tools, with it I can see the Tr's but they are somehow not displayed on the page.. Is this a bug or am I missing something?

[mheimann]

I've seen the exact same behavior just a few minutes ago, it happens when Reactable is changing from 0 rows to N rows which doesn't work. If you start with 1 dummy row and then switch to N rows (as a result of the re-rendering after setState) it will correctly show the N rows.

Another, proably better, workaround to this behavior is using column mappings in conjunction with the data prop of the <Table> component. When you use that it works as expected without the dummy row. See the "Manually specifying columns" section on the Github frontpage of the project.

BTW I have seen this on v0.81, not sure what the OP is using.

[glittershark]

Cool, that extra information is really helpful. I'm on it!

[mheimann]

Wow, fast response, thanks a lot 👍

[glittershark]

@mheimann and/or @cryptix I've been bashing my head at this for a while now and I can't for the life of me seem to get a failing test. I'm going to keep trying, but if either of you have time / the requisite knowledge to write a failing test for this issue and submit it as a PR that would be absolutely wonderful.

[glittershark]

d909db8 contains my (failed) attempts at writing a test case for this issue.

[mheimann]

Sorry for taking so long, I hope to have a look tomorrow to see if I can help you out with reproducing this.

[mheimann]

I have just tried this locally again using the code from https://github.com/glittershark/reactable/blob/master/build/reactable.common.js and it works as expected with the code provided above by @cryptix.

However, if I use the file included in the 0.8.1 release/tag (https://github.com/glittershark/reactable/releases/tag/0.8.1) it does not work. Did you change anything around since that release that could have fixed it? I'll try to give you a code sample on jsbin or jsfiddle shortly.

[mheimann]

Okay, here are some JS fiddles that illustrate the problem:

• http://jsfiddle.net/89vg8y5p/1/ -- The "not working" version using the 0.81 version of Reactable, it should display two rows after 3 seconds, but it doesn't
• http://jsfiddle.net/59ce3gqw/1/ -- The working version using the master of Reactable, it displays two rows after a 3 sec delay

The first fiddle will display the header row after the delay, but not the data. I hope this helps, but it seems the bug is no longer relevant since something must've changed that fixes the behavior between the master and 0.81. :)

[glittershark]

I'm able to reproduce it just fine in a live environment, it's getting it to reproduce in a test case that I can't do. If you checkout d909db8 and run the tests they currently pass, despite containing what to me seems like a valid test case for this issue here

[mheimann]

Sorry I totally misunderstood that, do you have any clue what code change introduced this issue? Maybe that would help us.

By just looking at the test my only guess right now would be that you're calling setState immediately, not after a delay (as with the $.ajax call in @cryptix's sample code). That seems to be the only difference, it should not make a difference in theory since componentDidMount is called after the initial render call.