Closing a modal popping up through a react table - reactjs

Question

I am popping up a modal an edit data through a button-click in the react table.
After performing the function when I try to close the modal, it would navigate to an empty page. I am calling the modal in the parent component from a child component as folllows.
<EditCardModal
show={this.state.show}
onHide={this.closeModal}
title="EDIT CARD"
id={this.state.id}
name={this.state.name}
uid={this.state.uid}
status={this.state.status}
serial={this.state.serial}
nodeType={this.state.nodeType}
onChange={this.handleChange}
handleEdit={this.handleEdit}
msg={this.state.msg}
/>
In the child component a close button is added to the modal header as below.
<Modal.Header closeButton>
<Modal.Title>{this.props.title}</Modal.Title>
</Modal.Header>
The method below shows how I close the modal.
closeModal = async event => {
event.preventDefault();
await this.setState({
show: false
});
};
TableList.js
class TableList extends Component {
constructor(props) {
super(props);
this.state = { show: false };
this.nodeCreationData = {};
this.state = {
show: false,
excelData: null,
rowInfo: null,
name: "",
uid: "",
order: "",
serial: "",
status: "",
excelDataValidation: false,
nodeType: "",
isSuccess: false,
a: null,
msg: "",
title: ""
};
this.showModal = this.showModal.bind(this);
this.closeModal = this.closeModal.bind(this);
}
showModal() {
// event.preventDefault();
this.setState({
show: true
});
}
closeModal() {
// event.preventDefault();
debugger;
this.setState({
show: false
});
}
componentWillMount() {
this.props.queryStart();
this.props.getCard();
}
getTdProps = (state, rowInfo, column, instance) => {
return {
onClick: async (e, handleOriginal) => {
console.log("It was in this row:", rowInfo.original.name);
await this.setState({
id: rowInfo.original.id,
name: rowInfo.original.name,
uid: rowInfo.original.uid,
serial: rowInfo.original.serial,
status: rowInfo.original.status,
nodeType: rowInfo.original.nodeType
});
if (handleOriginal) {
handleOriginal();
}
console.log("State", this.state);
}
};
};
tableHeaders = [
{
Header: "ID",
accessor: "id"
},
{
Header: "NAME",
accessor: "name"
},
{
Header: "UID",
accessor: "uid"
},
{
Header: "STATUS",
accessor: "status"
},
{
Header: "SERIAL",
accessor: "serial"
},
{
Header: "UPDATED_AT",
accessor: "updatedAt"
},
{
Header: "NODE TYPE",
accessor: "nodeType"
},
{
Header: "ACTION",
accessor: "action",
minWidth: 150,
Cell: ({ row }) => (
<div>
<Button type="submit" onClick={this.showModal}>
UPDATE CARD
</Button>
</div>
)
}
];
handleEdit = () => {
this.props.editCard({
id: this.state.id,
createdAt: this.state.createdAt,
name: this.state.name,
uid: this.state.uid,
serial: this.state.serial,
name: this.state.name,
status: this.state.status,
nodeType: this.state.nodeType
});
};
handleChange = event => {
if (event.target.name == "id") {
this.setState({
id: event.target.value
});
}
if (event.target.name == "nodeType") {
this.setState({
nodeType: event.target.value
});
}
if (event.target.name == "name") {
this.setState({
name: event.target.value
});
}
if (event.target.name == "serial") {
this.setState({
serail: event.target.value
});
}
if (event.target.name == "uid") {
this.setState({
uid: event.target.value
});
}
if (event.target.name == "status") {
this.setState({
status: event.target.value
});
}
};
render() {
const { TableListData, TableListLoading } = this.props;
var nodeTableList = null;
if (TableListData == null) {
nodeTableList = "No data";
} else {
nodeTableList = (
<ReactTable
// ref={r => {
// this.reactTable = r;
// }}
data={TableListData[0]}
columns={this.tableHeaders}
getTdProps={this.getTdProps}
/>
);
}
let loadingMsg = TableListLoading && <Alert>Loading</Alert>; //Show loading message
return (
<Grid fluid>
<EditCardModal
show={this.state.show}
onHide={this.closeModal}
title="EDIT CARD"
id={this.state.id}
name={this.state.name}
uid={this.state.uid}
status={this.state.status}
serial={this.state.serial}
nodeType={this.state.nodeType}
onChange={this.handleChange}
handleEdit={this.handleEdit}
msg={this.state.msg}
/>
<Row>
<Col xs={12} md={12}>
{loadingMsg}
{nodeTableList}
</Col>
</Row>
</Grid>
);
}
}
function mapStateToProps(state) {
return {
TableListData: state.cardUploader.data
};
}
export default withRouter(
connect(
mapStateToProps,
cardUploaderActions
)(TableList)
);
Can someone help me to solving this matter?