Table should be rerendered on state change

[evilj0e]

I'm using now key in parent component's state some key, which defines type of templating mapData.

Now on change that key by setState happens nothing.
Correct behaviour is table should be rerendered.

[frux]

@evilj0e Can you provide some small simple example of code?

[evilj0e]

const React = require('react');
const createReactClass = require('create-react-class');

const UT = require('unity-table');
const SimpleTable = UT.SimpleTable;

const AwesomeComponent = createReactClass({
    getInitialState: function () {
        return {
            timeType: [1]
        };
    },

    handleTimeChange: function () {
        var currentTimeType = this.state.timeType[0];

        this.setState({timeType: [currentTimeType ? 0 : 1]});
    },

    formatTime: function () {
        var time = {};

        switch (this.state.timeType[0]) {
        case 1:
            time = {
                date: '11.11.1111',
                time: '20:20',
                comment: '42'
            };
            break;
        default:
        case 2:
            time = {
                date: '22.12.2222',
                time: '20:20',
                comment: '42'
            };
            break;
        }

        return <span>{`${time.date} ${time.time} ${time.comment}`}</span>;
    },

    mapData: function (data) {
        return ({
            time: this.formatTime(data.time),
            description: data.description,
        });
    },

    getColumns: [
        {name: 'time'},
        {name: 'description'}
    ],

    getTableHead: function () {
        return {
            time: 'Time',
            description: 'Message'
        };
    },

    render: function () {
        const data = this.props.data; // some custom data

        return (<div>
            <span onClick={this.handleTimeChange}>Click me</span>
            <SimpleTable
                columns={this.getColumns}
                tableHead={this.getTableHead}
                mapData={this.mapData}
                data={data}
                keyName='time'
                />
        </div>);
    }
});

module.exports = AwesomeComponent;

On setState AwesomeComponent will be rendered, but none of mapData or formatDate will be called.

[evilj0e]

I've also tried to mutate data and fill it with new key with value this.state.timeType, but also nothing happend.

[evilj0e]

I've found how to fix it. I will send you PR.

[frux]

I see. Your mapData function is not pure and actually still be the same. Thats's why SimpleTable didn't notice any changes. SimpleTable should extend Rect.Component instead of React.PureComponent. I think that it's gonna solve this problem. Waiting for your PR 😉