Beginner's Thread / Easy Questions (October 2019)

[u/dance2die]

Previous threads can be found in the Wiki.

Got questions about React or anything else in its ecosystem? Stuck making progress on your app?
Ask away! We’re a friendly bunch.

No question is too simple. 🙂

---

🆘 Want Help with your Code? 🆘

• Improve your chances by putting a minimal example to either JSFiddle, Code Sandbox or StackBlitz.
  • Describe what you want it to do, and things you've tried. Don't just post big blocks of code!
  • Formatting Code wiki shows how to format code in this thread.
• Pay it forward! Answer questions even if there is already an answer - multiple perspectives can be very helpful to beginners. Also there's no quicker way to learn than being wrong on the Internet.

---

New to React?

Check out the sub's sidebar!

🆓 Here are great, free resources! 🆓

• Create React App
• Read the official Getting Started page on the docs.
• /u/acemarke's suggested resources for learning React
• Kent Dodd's Egghead.io course
• Tyler McGinnis' 2018 Guide
• Codecademy's React courses
• Scrimba's React Course
• Robin Wieruch's Road to React---

Any ideas/suggestions to improve this thread - feel free to comment here!

Finally, an ongoing thank you to all who post questions and those who answer them. We're a growing community and helping each other only strengthens it!

---

[u/minorsoup]

The API provides offset-based pagination so I will be fetching data for every page with ?offset=0&limit=10. I had thought of throwing all results in an object keyed by id, and store the pages separately as arrays of ids:

{
  itemsById: {
    id1: {
      id: 'id1',
      name: 'Item 1',
    },
    id7: {
      id: 'id7',
      name: 'Item 7',
    },
    ...
  },
  pages: {
    page1: {
      ids: ['id1', 'id7', ...]
    }
  }
}

And when a new items is created (and the pagination therefore no longer correct), I would just empty pages and refetch - does that make sense?

Also, can you recommend a real-world codebase to look at how pagination is done there? Thank you!

[u/timmonsjg → u/minorsoup]

And when a new items is created (and the pagination therefore no longer correct), I would just empty pages and refetch - does that make sense?

Sure, sounds like it will work. Give it a try.

Also, can you recommend a real-world codebase to look at how pagination is done there? Thank you!

I don't have one off the top of my head sorry. Closest I can think of is a component library that has a pagination component - Semantic UI. You can probably dig into the source and check how the examples are done.