Setting state with the selectedRows has unexpected results

[suederade]

<Table
    fixedHeader={true}
    selectable={true}
    multiSelectable={true}
    height={'100%'}
    onRowSelection={selectedRows => onRowSelect(selectedRows)}>

<TestTable data={this.state.data}
    onHeaderClick={this.sortColumn}
    onRowSelect={this.updateSelectedRows} />

updateSelectedRows(selectedRows) {
    this.setState({selectedRows});
},

When I use this pattern, then the table no longer behaves correctly. Checkboxes don't check and selectedRow array only has one index. I want it passed up because it needs to be passed to another component. But just the presence of the setState causes this.

Also, onRowSelection gets fired when the table is rerendered and there are rows are selected (but not when there are none selected).

[suederade]

Now with the same code I had in earlier (that worked earlier), it doesn't work now.

updateSelectedRows(selectedRows) {
    console.log('add row to state');
    console.log(selectedRows);
    this.state.data.forEach(obj => {
        obj.checked = false;
    });
    selectedRows.forEach(index => {
        this.state.data[index].checked = true;
    });
    this.setState({data: this.state.data}, () => {console.log(this.state)});
},

EDIT

And now works after undoing and redoing in text editor. Though the first point still doesn't work.

[suederade]

Nor does this table function correctly with this:

    var selectedTests = [];
    if(selectedRows === 'all') {
        selectedTests = this.state.data;
    } else if(selectedRows !== 'none') {
        selectedRows.forEach(index => {
            selectedTests.push(this.state.data[index]);
        });
    }
    this.setState({selectedTests}, () => {console.log(this.state)});

[suederade]

Not being able to update the state with the selected rows makes its functionality almost useless.

[suederade]

Not even being able to select a row (not even animations or the checkbox being clicked) if your onRowSelection function is this.setState({selectedRows}) seems more like a bug than a feature request, in my opinion.

[suederade]

It seems that setting the state in that function is somehow resetting the state. If I put a timeout, the row is checked then once it fires, it unchecks itself and the TableBody state is reset.

[suederade]

This is me not knowing enough about React. Need to make sure render isn't called after setting its state.

[oliviertassinari]

@stevenmwade I'm glad you found a solution. Sometime just exposing the issue help 😁.

[suederade]

@oliviertassinari Although componentWillReceiveProps and componentClickAway seem to be trying to do some of the same things like setting the selectedRows to an empty array which both run on click away (which I will probably change because I need that to persist).

[issmirnov]

I'm having the same issue - can you elaborate on your final solution? Trying to setState with the indices of selected rows for later processing. Thanks!

[spoeck]

Found a solution:
#1897

 constructor() {
        super();
        this.state = {
            selectedRows: []
        };

        this._onRowSelection = this._onRowSelection.bind(this);
    }


    render() {
        return (
                <Table multiSelectable onRowSelection={this._onRowSelection}>
                    <TableHeader>
                        <TableRow>
                            <TableHeaderColumn>c1</TableHeaderColumn>
                            <TableHeaderColumn>c2</TableHeaderColumn>
                            <TableHeaderColumn>c3</TableHeaderColumn>
                        </TableRow>
                    </TableHeader>
                    <TableBody showRowHover ref={(tableBody) => { this.tableBody = tableBody; }}>
                        {this._renderTableRow()}
                    </TableBody>
                </Table>
        );
    }

    _onRowSelection(rows: Array<number>) {
        this.setState({selectedRows: rows}, () => this.tableBody.setState({ selectedRows: rows }));
    }