score:1
have state variables for loading and the page count,
const [data, setdata] = usestate([]);
const [loading, setloading] = usestate(false);
const [currentpage, setcurrentpage] = usestate(1);
const [dataperpage, setdataperpage] = usestate(10); // 10 items needed per page
your api call response should set the loading status after the setdata()
useeffect(()=>{
function getdata(){
setloading(true); // until the response is available, user will see loader
axios
.get(
"filter/?speciality=" +
path[1],
config
)
.then((res) => {
var somevariable = res;
setdata(res.data);
setloading(false);
}).catch(....)
}
getdata();
},[])
here is the pagination logic,
const indexoflastdata = currentpage * dataperpage; // 1 * 10
const indexoffirstdata = indexoflastdata - dataperpage;
const currentdata = posts.slice(indexoffirstdata, indexoflastdata);
first page index will be index of last data minus the number of data you want to allow per page, when this is zero, its first page, if its 10 then its second page and so on. you'll control this through the current page number on click of next/number of the page.
example pagination component below will take total data available, the posts allowed per page and paginate function as props.
const pagination = ({dataperpage, totaldata, paginate}) => {
const pagenumbers = [];
for(let i=1; i<= math.ceil(totaldata/dataperpage); i++){
pagenumbers.push(i);
}
return (
<nav>
<ul classname="ur style class for nav">
{pagenumbers.map(number=>{
return <li key={number}>
<a onclick={ () => paginate(number) } classname={currentpage===number ? "active": ""}>
{number}
</a>
</li>
})}
</ul>
</nav>
);
};
in your component,
return (
<div>
<data data={currentdata} loading={loading}/>
<pagination dataperpage={dataperpage} totaldata={data.length} paginate={handlepaginate}/>
</div>
)
i have created a codesandbox with a working example for you here.
score:1
you need to set the pagecount and pagesize variables. page size would be 10 in your case. based on the current current page index, you need to extract that part of your data array and render on that page.
Source: stackoverflow.com
Related Query
- react js i am trying to make a pagination
- Trying to make a to-do-list using react
- I am trying to make a select tag dynamically in react
- React : How to make pagination in Loopback
- trying to make a React dropdown with checkbox options in it and its not working properly
- Trying to make my delete button working in REACT
- Trying to make a for loop to draw an SVG in React
- Having trouble with React Hooks and States. Trying to make a password strength meter
- React trying to make a sidebar with redux
- i'm trying to make a axiosGET request to my react component, i get the object on the console.log. But when i try to render it i get a "is not defined"
- HI! I'm new in react and trying to make multiple radio buttons
- Expected an assignment or function call and instead saw an expression no-unused-expressions when trying to make a component using react
- I am new to React and trying to make a form using useState. I get an error: "TypeError: setValues is not a function handleInputChange"
- Trying to make an anchor within a Paragraph using React
- i'm Trying to make react paypal button that change the billing amount on props change
- Trying to make a counter for every time a input field is complete in React w/ Formik
- Trying to make icons hide/show - React
- How to make a button pagination works in React
- Trying to display items from array using React Bootstrap Pagination
- I'm trying to make sense of the React TicTacToe tutorial. How does their calculateWinner helper function operate?
- Invalid hook call trying to make an axios get request in react
- I'm trying to make a select component in React but onChange listener is not working
- Trying to make factorial in React
- How to make default number of items selected in React bootstrap table pagination
- I am trying to make a color game in react but always end up with diffrent colors
- how to make filtered list of Api and implement pagination of infinite scrolling in react
- Make React useEffect hook not run on initial render
- Can I make dynamic styles in React Native?
- Make view 80% width of parent in React Native
- How can I make use of Error boundaries in functional React components?
More Query from same tag
- React useContext not rerendering on state change
- Collection object returned as undefined using async/await
- how to route in nodejs with react?
- Webpack runs Babel against PNG
- onmouseover show Message on React
- doc.fromHTML is not a function
- React Context vs React Redux, when should I use each one?
- Do we still need functional setState way in react hooks?
- What is the purpose of using JSON.stringify()?
- Now.sh build breaking due to: Support for the experimental syntax 'decorators-legacy' isn't currently enabled
- Determining state type in context with typescript
- Is there a way to avoid purging a specific library with Tailwind?
- Highcharts drilldown not working when module is imported react
- How to display the back-end error message instead of status code
- I got error while printing object's value after I update the state in react
- Why is slice returning an empty array?
- Flow React HOC typing (without HOC)
- getFirebase is not a function error using firebase auth create user
- React Bootstrap Components not displaying
- How to persist state across react router transitions
- How to use <webview> methods inside a react component
- React: how to link to a different component (to be open in the same page)
- React axios request to Spring Boot REST server authentication problem
- react-router-redux cannot push new URL
- React - How to prevent parent re-render on prop change
- MUI - How to open Dialog imperatively/programmatically
- putting html tags in index.js for my react app shows error
- Manage multiple redux form on page
- Argument of type 'any' is not assignable to parameter of type 'never'.ts(2345)
- Map chart not load in react using fusion chart