Add more keys and unique key props

[sar-mko]

Description

• One of the problems was that list.id and item.id either didn't exist or were identical to item name (so not unique enough)
• Another was that the properties on filteredObject were mapped through and no assigned keys.
• Used crypto.randomUUID() in the rendering in Home.js , and added a Fragment in List.jsx to add the key to the outside mapping.

Related Issue

closes issue #32

Acceptance Criteria

• The key prop is added to the appropriate list element
• The console is clear of any errors

Type of Changes

bug fix

Updates

• Used crypto.randomUUID() for all keys
• Added a new key for the outer map on filteredObject in List.jsx

Testing Steps / QA Criteria

• Click through your lists and view both the Home page and List Page
• There should be no errors in the console for invalid Key not being unique.

[github-actions]

Visit the preview URL for this PR (updated for commit a2835ba):

https://tcl-76-smart-shopping-list--pr43-sm-fix-key-bug-8kj71g3d.web.app

_{(expires Mon, 07 Oct 2024 03:29:53 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 512b1a88be8ae05fd3e727b99332819df760271d}

[arandel1]

Nice job, Sarah! Thanks for taking care of that bug. Everything looks good on my end.

[EmmaBin]

Nice Job, thanks for figuring this out by implementing crypto.randomUUID().