how should I re-draw table component with entered value - reactjs

Question

I am trying to call an API with given value for drawing data table.
Here is what I want to do and How the actual code works.
How should I fix it? please I need your kind advice.
what I want to do
draw a table with initial value(with 5 rows).
type 2 and click submit button for re-drawing table(with 2 rows)
the table should be given with 2 rows.
How the actual code works
draw a table with initial value(with 5 rows).
type 2 and click submit button for re-drawing table(with 2 rows).
the table is given with 5 rows.
my main code
import React, { useEffect, useState } from 'react';
import Table from 'components/advTable';
import { apiProvider } from 'services/modules/provider';
import {
CBadge,
CDataTable,
CCard,
CCardBody,
CCardHeader,
CCol,
CFormGroup,
CInput,
CLabel,
CSelect,
CRow,
CCardFooter,
CButton,
} from '#coreui/react'
import CIcon from '#coreui/icons-react'
const PendingVertification = () => {
const [query, setQuery] = useState(5);
const [info, setInfo] = useState({});
const [page, setPage] = useState(1);
const [countPerPage, setCountPerPage] = useState(5);
const subURL = "users";
const onChange = (e : any) => {
console.log('the Value: ', e.target.value);
//if I enter number 2 and setQuery(2)
setQuery(e.target.value.toLowerCase());
};
const onSubmit = (e : any) => {
e.preventDefault();
//Call API to draw a table
getTableList();
//setQuery(5);
};
const getTableList = () => {
//Call API for table Data with Given values.
apiProvider.getTabledata(page, query, subURL ).then(res => {
setInfo(res.data);
}).catch(err => {
setInfo({});
});
}
useEffect(() => {
//Call Rest API only once
getTableList();
}, []);
return (
<>
<CRow>
<CCol xs="12" lg="15">
<CCard>
<CCardHeader>
Sample
<small> Form</small>
</CCardHeader>
<CCardBody>
<CRow>
<CCol xs="12">
<CFormGroup>
<CLabel htmlFor="ccnumber">Search Value</CLabel>
<CInput id="ccnumber" placeholder="fill this form" onChange={onChange} required />
</CFormGroup>
</CCol>
</CRow>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" color="primary" onClick={onSubmit}><CIcon name="cil-scrubber"/> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban" /> Reset</CButton>
</CCardFooter>
</CCard>
</CCol>
</CRow>
{info && <Table tableData={info} query={query} subURL = {subURL}/>}
</>
//the code above Draws table with given values
);
};
export default PendingVertification;
Table component code
import React, { useEffect, useState, useRef } from 'react';
import DataTable from 'react-data-table-component';
import { apiProvider } from 'services/modules/provider';
interface Props {
tableData: any,
query: number,
subURL: string
}
const Table: React.FunctionComponent<Props> = ({ tableData, query, subURL}) => {
const columns = [
{
name: tableData.mata? tableData.meta.firstColum : 'Avatar',
cell: (row : any) => <img height="30px" width="30px" alt={row.first_name} src={row.avatar} />
},
{
name: tableData.mata? tableData.meta.secondColum : 'First Name',
selector: 'first_name'
},
{
name: tableData.mata? tableData.meta.thirdColum : 'Last Name',
selector: 'last_name'
},
{
name: tableData.mata? tableData.meta.fourthColum : 'e-mail',
selector: 'email'
}
];
//set The value for drawing table
// countPerpage should be 2 when I enter 2 but it always contain number 5.
const [page, setPage] = useState(1);
const [countPerPage, setCountPerPage] = useState(query);
const [users, setUsers] = useState<any>({tableData});
const isMounted = useRef(false);
const getTableList = async () => {
//re-draw table with give values.
const response = await apiProvider.getTabledata(page, countPerPage, subURL);
setUsers(response);
}
useEffect(() => {
if(isMounted.current) {
getTableList();
} else {
isMounted.current = true;
}
}, [page, countPerPage, tableData]);
return (
<>
<DataTable
title="Table (Server side Pagination)"
columns={columns}
data={users.data}
highlightOnHover
pagination
paginationServer
paginationTotalRows={users.total}
paginationPerPage={countPerPage}
paginationRowsPerPageOptions={[5, 10, 15, 25, 50]}
paginationComponentOptions={{
noRowsPerPage: false
}}
onChangeRowsPerPage= { rowsPerPage => setCountPerPage(rowsPerPage)}
onChangePage={page => setPage(page)}
/>
</>
);
};
export default Table;

Answer 1

Try this in Table component:
//New useEffect, keep your other one
useEffect(() => {setCountPerPage(query)}, [query])