React Infinite Scroll Challenge | Scotch.io

Challenge Info:

Sponsor: DevMountain Bootcamp

Code:

💖 Become a Patron: Show support & get perks!

Website & Udemy Courses

Follow Traversy Media:

[satyamnaithani]

I was struggling since 4 days and you solved my problem in 30 min. Thankyou so much for such an amazing explanation. Definitely this is the best video on infinite scroll I have ever seen.

[TheGoldens]

Great video Brad! I'm using this on a small project I'm working on.
Just an FYI for anything one following this: @32:02 you only have to update "start" by 1 to get the very next set of photos. So for example, the first response will give you photos #1 - #30. { this.state.start + 1 } on the next response will set the "page count" to 2 and give you photos #31 - #61.


In the video, Brad does { this.state.start + count } on the next response which set the "page count" to 31. This will give you photos #931- #961 (something like that). In this query its ok because he's fetching ALL photos Unsplash has (1m+), but if your query only returns like 1000 photos, you're going to skip over a lot of photos

[eugenemusebe]

Just saw the challenge on Twitter and boom...Brad came through.

[JR-yiwb]

another day, another Traversy Media tut!

[lavanyam]

Even a beginner could follow the steps in this video. It's very clear and to the point. You are great teacher and our treasure!

[demian]

Good content as always. Keep it up!!!
Late reply but If someone is trying this tutorial now, I think Brad made a mistake here. When setting the start variable with setState() you can not access it right after. Change of state is visible only after a rerender. So that is why Brad gets warning that two elements have the same key. He actually gets two responses with the same start. So he gets another 30 photos that are the same as the first 30. Correct me if I am wrong.

[dineshkinibailoor]

Any idea why latest version of unsplash-js throw error like "Unsplash is not a constructor" upon initializing.

[amitshaiwale]

Your tutorials really make difference, you are awesome man. thanks for all these tutorials

[henrymunoz]

Hey Brad you are great men even on sundays you give amazing content. thank you for helping us become better develipers

[tqhuy]

For any one that is using in their projects, keep in mind this property 'scrollableTarget' from the package, you can find more info in their official doc. Anyways, if scrollableTarget is not set, <InfiniteScroll> will listen to scroll event of document.body, which in my case, causes some problems relating to fetching data (different React components will trigger the wrong actions, ...) Remember to set scrollableTarget to be the reference to the correct context (<InfiniteScroll> 's parent's id for example).

[alimax]

Thanks Brad
I added this to solve the duplicated KEY error message
{this.state.images.map(image => (
<Image key={image.id+Math.random()} image={image} />
))}
I think this will solve it

[kerryd]

Just wanted to let you know, that doing these free videos works. I only found you through your Youtube channel and I've purchased your Udemy courses. I also signed up for 2 other courses by BootCamp instructors. Your content is 100 times better than theirs. So you should be the BootCamp instructor. (-:

[edavids]

Congrats, bro! Nice tutorials, Best YouTube channel ever

[nicholasaristeidou]

Brad honestly your videos are amazing. I really hope one day i become a developer like you.

[Amitheous]

This is great! I'd love to see more of these challenge response type videos!

[marcindomanski]

Good implementation of Infinite scroll is someting like "good select plugin".
Simple example - when i scroll for 1 minute, how i can pause (close browser) and return to place where i stop? How I can share link to this place?
Or - i scroll 30 minutes long - how this affect to browser memory?
But for simple challenge - this is brilliant.

[simajacob]

Brad The master mind you just read my mind

[mithunnathmayooranadhan]

Hey Brad, Thanks for the great tutorials. I'm waiting for your video on Flutter and DART Lang.

[allaheadflank]

Nice, awesome to see a small coding challenge!

[Prakhar]

applicationId is replaced by accessKey in the Unsplash object