I have a table with some values and for each row have a button to show the status of the record, and cliccking I can change this status.

All work good, but when change page or chnage sorting of the rows, the column with the buttons remain with the old status order (but only for the colors). I have add some id in the button and see that this change on sort, but the background color no, remain always the same.

class StatusButton extends React.Component {

constructor(props) {

    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
        status: props.status,
    };
}


toggle() {

    this.props.action();

    this.setState({
        status: !this.state.status,
    });
}


render() {
    return (
        <Button style={{ background: this.state.status ? 'green' : 'red' }} onClick={() => this.toggle()}><i style={{ color: "white" }} className={this.state.status ? 'icon-check' : 'icon-close'}></i></Button>
    );
}

}

..............

RenderTable(items) { let columns = [ { label: '#', field: 'id', sort: 'asc', width: 10 }, { label: 'Name', field: 'name', sort: 'asc', width: 100 }, { label: 'Order', field: 'order', sort: 'asc', width: 30 }, { label: 'Status', field: 'status', sort: 'asc', width: 30 }, { label: 'Action', field: 'action', sort: 'asc', width: 90 } ];

                let data = [];

                items.forEach((item, index) => {
                    let row = {
                        id: item.id,
                        name: item.name,
                        order: <FormGroup><InputGroup><Input type="number" placeholder="0" /><Button style={{ width: "50px" }} color="success"><i className="icon-check"></i></Button></InputGroup></FormGroup>,
                        status: <StatusButton status={item.enabled} action={() => this.UpdateStatus(index)}></StatusButton>,
                        action: this.renderActionButton(index)
                    };
                    data.push(row);
                });

                const table = { columns: columns, rows: data }

    return (
        <MDBDataTable
            responsive
            btn
            fixed
            hover
            striped
            bordered
            order={['name', 'asc']}
            onPageChange={value => console.log(value)}

            data={table}
        />
    );

}