I am using NextJS to create a photo gallery with pexels api and want to add pagination to the project, but i didn't understand very well the documentation about pagination, so i dont know what i have to do to make this work.
What i want is to have a buttom at the bottom of the gallery saying "show more" and when i click it will show more photos.
this is my code:
First create two react states.
const [page, setPage] = useState(1);
const [perPage, setPerpage] = useState(10);
Here we are facing 10 images per page, if you want you can change how many images you want per page.
Then just convert your URL like the following.
const url = `https://api.pexels.com/v1/curated?page=${page}&per_page=${perPage}`
const data = await fetch(url)
Do that inside that useEffect hook. Now everything you want to load more just increment the perPage state. And if you want to get a new page and new image, then change the page state.
Related
Today for a school project I need to create a shop in which when you click a button, the Video (used as background) in the Home page changes.
I found how to change color through style but here the Video is a component and the Video's link is it content so I'm not sure how to proceed...
I'm trying to use useEffect like this :
useEffect(() => {
const backGround = document.getElementById("bg");
setBg(backGround.Video = "source{require("./test2.mp4")}");
}, [bg])
`
If you guys could refer me, it would be awesome !
Inside the project, I used fake api, and in a component with setup, before the component is mounted, I get it and display it.
But the problem is that I make a series of changes on the same page on the captured apis, but when I render another page and go back to the previous page that has the api, this time because it is mounted, it executes the setup and the tasks I did on that page. They disappear. What can I do to make it run only when it is first loaded and not to run that code when it is mounted???
setup(){
const store = useStore();
async function getApi(){
await store.dispatch('task/getTasks')
}
getApi()
const tasks = computed(()=> store.state['task'].tasks)
return{tasks}
}
I have some data coming from an API and I'm putting these data inside a slider using SwiperJS.
take a look at the code here:
As shown in the picture above. Whenever I navigate to web development/software development/UI design I load new data. The problem is, whenever I navigate to get the data, and loop through and display the data using swiper, swiper only shows me the first slide. Note that when I inspected the page I found all the slides there but the swiper for some reason is not displaying them.
here's the code:
I found the answer to my question. I had to create a function to force the rerendering of the swiper component. Here's the code:
forceRerenderSwiper() {
// Remove my-component from the DOM
this.renderComponent = false;
// If you like promises better you can
// also use nextTick this way
this.$nextTick().then(() => {
// Add the component back in
this.renderComponent = true;
});
}
then you just add an if statement when you call the component
and don't forget to set the renderComponent to true when you're ready to render it.
In a react native project using MobX, it would be more efficient to save the data for use on the next page. Or is it sending as params with the route? Suppose we are sending 50 pieces of data in Data.
//the page I will use the data
//option1
const {data} = route.params;
//option2
const {data} = Store;
Which one is better to use in terms of performance? Does the data I send with the route affect the rendering time of the opened page?
i have two screens one where the profile information is showing and another screen to edit the information. If i entered the first screen profile it's shows me the right data from the database. Then i move to the next screen where i can change the Information everthing worked so far. But if I go back to the previous screen i still see the old data. So there is no rerendering.
But if i navigate to the other screen that screen fetched the new data. and the call getCurrentUserProfile is executed
This ist the screen with the profile information about the user.
const ProfileScreen = props => {
const [userObj, setUserObj] = useState({});
useEffect(() => {
let mounted = true;
getCurrentUserProfile().then(user => {
if (mounted) {
setUserObj(user);
}
console.log(user)
});
return () => mounted = false;
}, []);
console.log("----b------") // This is only output on the first call
}
How can i fix this. Is there a way when in the database is something changed, so the component rerender and fetches the new data.
Thanks.
You are probably using #react-navigation package. So, if you want to refetch data when come back to the previous page, you can use https://reactnavigation.org/docs/use-is-focused on that “previous” page.
Just look at their docs, you will get the idea.
P.S: Usually we don't unmount components directly. In React Native, we use navigator to mount/unmount components