Opening React Modal change sorting order of MDBDataTable

Question

I am using MDBDataTableV5 data tables in in my reactjs project. When i click on view button the modal open and it auto change my order of table's row.

I am new in ReactJs and could not identify the problem. May be this issue comes by using setState function.

import React, { Component } from 'react';
import { Container, Row, Col, Card, CardBody, Button, Input, Modal, ModalBody, ModalFooter } from 'reactstrap';
import { activateAuthLayout } from '../../store/actions';
import { Link, withRouter } from 'react-router-dom';
import { connect } from 'react-redux';

import { MDBDataTableV5 } from 'mdbreact';


class Discussion extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modalStandard: false,
    };
  }

  toggleModel(id) {
    this.setState({
      modalStandard: !this.state.modalStandard
    });

    this.removeBodyCss();
  }

  removeBodyCss() {
    document.body.classList.add('no_padding');
  }

  componentDidMount() {
    this.props.activateAuthLayout();
  }

  render() {

    const data = {
      columns: [
        {
          label: 'Id',
          field: 'id',
          width: 150
        },
        {
          label: 'Name',
          field: 'name',
          width: 150
        },
        {
          label: 'Agency',
          field: 'agency',
          width: 270
        },
        {
          label: 'Date',
          field: 'date',
          width: 200
        },
        {
          label: 'Action',
          field: 'action',
          width: 100,
        }
      ],
      rows: [
        {
          id: 22,
          name: 'Ashton Cox',
          agency: 'Cristiano Autoparts',
          date: '2020-05-12',
          action: <Button type="button" onClick={() => this.toggleModel('discussionId')} color="info" size="sm"><i className="mdi mdi-chat mr-2 ml-2"></i></Button>
        },
        {
          id: 102,
          name: 'Tiger Nixon',
          agency: 'Astro Automobiles',
          date: '2020-03-12',
          action: <Button type="button" onClick={() => this.toggleModel('discussionId')} color="info" size="sm"><i className="mdi mdi-chat mr-2 ml-2"></i></Button>
        },
        {
          id: 52,
          name: 'Garrett Winters',
          agency: 'DHCR Repair Service',
          date: '2018-03-05',
          action: <Button type="button" onClick={() => this.toggleModel('discussionId')} color="info" size="sm"><i className="mdi mdi-chat mr-2 ml-2"></i></Button>
        }
      ]
    };

    return (
      <React.Fragment>
        <Container fluid>
          <div className="page-title-box">
            <Row className="align-items-center">
              <Col sm="6">
                <h4 className="page-title">Discussions</h4>
              </Col>
            </Row>
          </div>

          <Row>
            <Col>
              <Card>
                <CardBody>
                  <Row>
                    <Col sm="6">
                      <Input type="text" placeholder="Search by Agency" className="search-input-matrial" />
                    </Col>
                    <Col sm="6">
                      <Input type="text" placeholder="Search by Name" className="search-input-matrial" />
                    </Col>
                  </Row>
                </CardBody>
              </Card>
            </Col>
          </Row>

          <Row>
            <Col>
              <Card>
                <CardBody>
                  <MDBDataTableV5
                    responsive
                    striped
                    data={data}
                    searching={false}
                    onSort={value => console.log(value)}
                  />
                </CardBody>
              </Card>
            </Col>
          </Row>

          <Modal isOpen={this.state.modalStandard} toggle={() => this.toggleModel('discussionId')} >
            <div className="modal-header">
              <h5 className="modal-title mt-0" id="myModalLabel">Discussion</h5>
              <button type="button" onClick={() => this.setState({ modalStandard: false })} className="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <ModalBody>
              <div className="chat-conversation">
                Body text
              </div>

            </ModalBody>
            <ModalFooter>
              <Button type="button" color="secondary" onClick={() => this.toggleModel('discussionId')} className="waves-effect">Close</Button>
              <Button type="button" color="primary" className="waves-effect waves-light">Save changes</Button>
            </ModalFooter>
          </Modal>

        </Container>
      </React.Fragment>
    );
  }
}

export default withRouter(connect(null, { activateAuthLayout })(Discussion));

Answer 1

The issue is that your Modal and MDBDatatable are siblings and the Modal is updating the parent state, which causes both of those components to rerender.

Please see this related question for the way to handle this.