/Fetch

Gathering and displaying data from Fetch API. Excluded items without a name.

Pulling Data from Fetch API
Technology frontend frontend frontend

Coffee Divider

React Dependencies:

  • Axios
  • React-router-dom (Router, Route, Link)
  • Styled-components

Pages:

  • Home page includes the list items in card-form.
  • About page includes details of the author.
  • List Text page includes the list items in text-form.

Features:

  • This Fetch API site shows the items in card-form as well as text-form.
  • It also consists of a toggle dark-mode button.
  • Each page consists of a Layout that holds the ToggleBar, Search Bar, and Footer.
  • Navigation Bar

Future Features/Plans:

  • Functioning Search Bar.

  • CRUD operations to add, update, and delete list items.

  • Pagination to include one page for each listId

  • cleaning up the files to make them more DRY, especially with the axios calls.

Coffee Divider

How the cards/lists were created:

  1. Axios get request to the API to pull in the array of data objects.
  2. Filter method to exclude all items that had an empty string or null in the name.
  3. Map method over the filtered items to create the cards and lists.