How to load new data to react-bootstrap-table2 - react-bootstrap-table

Question

With this code the table is getting populated. I am trying to load new data to the table on clicking the button "Load New Data" which will call "handleClick" handler and I am loading new data "this.state.MyDataList = require('./data1.json');" but the actual table is showing the same old data. Why the new data is not getting reflected in the table.
import React, {Component} from 'react';
import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';
import 'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.css'
import BootstrapTable from 'react-bootstrap-table-next';
import filterFactory, { textFilter , selectFilter} from 'react-bootstrap-table2-filter';
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
import axios from 'axios';
const { SearchBar } = Search;
export default class Customers extends Component {
constructor(props) {
super(props)
this.state = {MyDataList: require('./data.json'),
"columns" : [{
dataField: 'id',
text: 'Title',
sort: true,
filter: textFilter()
},{
dataField: 'name',
text: name',
sort: true,
filter: textFilter()
},{
dataField: 'age',
text: 'Age'
}]};
}
//function which is called the first time the component loads
componentDidMount() {
}
handleOnExpand = (row, isExpand, rowIndex, e) => {
//My code here
}
**handleClick = () => {
this.state.MyDataList = require('./data1.json');
}**
handleDataChange = ({ dataSize }) => {
this.data = require('./data1.json');
console.log("Hi")
}
render() {
// if (!this.state.MyDataList)
// return (<p>Loading data</p>)
return (<div className="addmargin">
<ToolkitProvider
keyField="Id"
data={ this.state.MyDataList }
columns={ this.state.columns }
search
>
{
props => (
<div>
<h3>Input something at below input field:</h3>
<SearchBar keyField='Id' data={ this.state.MyDataList } columns={ this.state.columns }/>
<hr/>
**<button className="btn btn-warning" onClick={ this.handleClick }>Load New Data</button>**
<BootstrapTable onDataSizeChange={ this.handleDataChange } bootstrap4 keyField='Id' data={this.state.MyDataList } columns={ this.state.columns } striped hover condensed filter={ filterFactory() } />
</div>
)
}
</ToolkitProvider>
</div>
);
}
}

Answer 1

It worked after loading data with the state setter " this.setState".
handleClick = () => {
this.setState({MyDataList : require('./data1.json') })
}