score:6
getserversideprops
is for getting data to be used for the first render. unlike that, your "load more" button needs to work on the client-side.
i will try to summarize the steps you should take:
in order to be able to manipulate the posts that will be displayed, you need to store your items in the state, not props. so, create a state using
usestate
and fill it with the data coming from the props, something like this:const [posts, setposts] = usestate(props.posts);
from now on, you will use this
posts
variable instead of the one from the props.add the "load more" button. all loading more posts business logic should go to its
onclick
handler. something like this:<button onclick={async () => { const newposts = await getnewpostsfromapi(); setposts(...posts, ...newposts); }} type="button" > load more </button>
Source: stackoverflow.com
Related Query
- how to create load more bottom in nextjs for get rest of data? (Next.js Pagination)
- Moment.js - How to get weekly data [startDate & endDate of each week] for given month excluding previous and next month date
- How do I use data from POST request for the next GET request
- redux-form how to load data for editing
- How can i get array of object from this data for state and count in reactjs
- How can I create an interface for API data in typescript?
- How to get the html elements from Contentful Raw Data for RSS-feeds (gatsby-plugin-feed)
- how to make useAppSelector wait for data from Get request (instead of showing initial data)
- How to delay return in React.js for load data from JSON
- next js - how to create hoc for the page
- How to load more data on click from Firestore
- Cant figure out how to create a 'basic' HOC for a react / NextJS application
- How can I create a hook that reacts to an event to load more data?
- How to add a load more button to load next 50 requests from axios call?
- How do I filter a list of data by id for my react component to get the name of the object
- basic reactjs, how to get REST data and render it
- how to hide load more button after all data fetch from API?
- How can I get one single unique data from Database for each one component?
- How to get data from client side with odoo rest api server?
- How to force Nextjs to create a chunk for particular module?
- Image uploading - How to get the right format of image data for server side processing
- How to use for loop in reactjs to send data to get request in flask
- How can I mock multiple get axios request in Jest unit test for an async action that calls a few more async actions?
- How to get data from API and turn it into array list for Google Charts
- How to set permissions to only POST data for API (React + Django Rest Framework)
- How to pass mocked data for a GET call, in jest spyOn method
- After being able to load the landing page(Home component) , how do you get the rest of the react components to render through github pages?
- react-router v3: How to load data for the component when the same route with different query params is loaded
- How get async image data for react.js from firebase storage?
- how to call URL in axios.post request for get data each id?
More Query from same tag
- React-redux: Why is functional component rendering after updating redux state?
- Errors transpiling tsx using the create-react-app starter
- VSCode How do I debug with es6 mocha unit tests and jsx files
- How can I find two field from two different models in mongoDB?
- why link doesn't work when I use getStaticProps?
- How to watch webpack-dev-server running Jest tests at the same time?
- WithProps vs withHandlers
- How can I re-create a child component in React
- Flux + React.js Login/register flow
- Change classes to an element with react
- Using NPM dependencies Locally
- Where to put javascript functionality when certain Redux actions are thrown?
- React/Jasvascript:Dynamic classname setting in map function
- How to code image link in react component
- In react what does (obj: any) => boolean do?
- react - how to instantiate a component and when are they identical?
- `require is not defined` error when using electron with a react app
- How to clear AntDesign select?
- Trying to refactor the onSubmit property using Formik
- How to set a basename for react-router Router
- React Router Invariant failed when Route or Link is used in an external package
- Typescript React Error
- React Redux with functional hook (Unable to access action creator method on props)
- Why does my HTTP GET call to a subroute in react app gives a 404 NOT Found instead of HTML?
- How do I apply text translation to map elements?
- Why Material-UI date overlaps value with placeholder and complains about controlled input?
- Wrap ES6 Module around React Component
- How to set and clean interval by toggle function in react with hooks?
- ES6 destructuring assignment outside of constructor
- S3:getObject() for Graphql