I have three components in react application namely, Search, Dashboard and Table Component etc. But the button click function is not getting triggered in Table component. Here is the code, I am trying to develop a dashboard which has tables and I need sorting and pagination. This is minimum code from my project to produce the error. I have removed all logics of redux and api calls.
import React, {useState} from 'react';
import styles from './search.module.scss'
import { useNavigate } from 'react-router-dom';
import {fetchDashboardData} from '../../api/api';
const Search = () => {
const [dashboardName, setDashboardName] = useState("");
const [sprintId, setSprintId] = useState("");
const [loader, setLoader] = useState(false);
const [invalid, setInvalid] = useState(false);
const navigate = useNavigate();
// Handle form input changes
const handleDashboardNameChange = (event) => {
setDashboardName(event.target.value);
};
const handleSprintIdChange = (event) => {
setSprintId(event.target.value);
};
// Handle form submission
const handleSubmit = async () => {
if (dashboardName === '' || sprintId === '') {
setInvalid(true);
console.log('invalid form');
} else {
setLoader(true);
setInvalid(false);
try {
const response1 = await fetchDashboardData(dashboardName, sprintId);
navigate('/dashboard');
} catch (error) {
console.log(error)
}
}
};
return (
<>
<div className={`container mt-5 ${styles.cust_div}`}>
<div className="row justify-content-center">
<div className={`${styles.searchDiv} col-8 shadow-sm rounded p-5`}>
<form id="myForm">
<div className="row justify-content-center align-items-end">
<div className="col-6 mb-3">
<label for="dashboard_name" className={"form-label"}>Dashboard Name*</label>
<input type="text" className={`form-control ${styles.cust_control}`} onChange={handleDashboardNameChange} id="dashboard_name" required />
</div>
<div className="col-6 mb-3">
<label for="sprint_id" className={"form-label"}>Sprint*</label>
<input type="number" min="0" className={`form-control ${styles.cust_control}`} onChange={handleSprintIdChange} id="sprint_id" required />
</div>
</div>
<div className="d-flex justify-content-end position-relative mb-3">
<span className={`${styles.invalid_msg} ${invalid ? 'd-block' : 'd-none'}`}>*Please enter all mandatory fields</span>
<button type="button" className={`btn px-4 shadow-sm ${styles.cust_btn}`} disabled={loader} onClick={handleSubmit}>Search{loader ? <span className={`${styles.loader}`}></span> : ''}</button>
</div>
</form>
</div>
</div>
</div>
</>
)
}
export default Search;
Dashboard component
import React from 'react';
import styles from './dashboard.module.scss';
import TableComponent from './TableComponent';
const Dashboard = () => {
return (
<>
<div>
<body>
<div className="container">
<div className="row">
<div className="col-7">
<TableComponent />
</div>
</div>
</div>
</body>
</div>
</>
)
}
export default Dashboard;
Here is the table component
import React from 'react';
import styles from './TableComponent.module.scss';
const TableComponent = () => {
const handleClick = (e) => {
console.log('Clicked');
};
return (
<div className='container'>
<div className='row'>
<div className='col-3'>
<button type="button" className="btn" onClick={(e) => handleClick(e)}>
Click
</button>
</div>
</div>
</div>
)
}
export default TableComponent;