Use local storage so that bucket list persists on refresh - Githubissues

djbowen95 / Hit-the-Bucket

Front-end BUCKET LIST application built with REACT. Users can add, update or delete items from a bucket list - which persists when they refresh or revisit the page. Uses STATE, HOOKS, COMPONENTS, PROPS, conditional rendering, forms and event handling. Built from starter code.

https://djbowen95.github.io/Hit-the-Bucket/

MIT License

0 stars 0 forks source link

Use local storage so that bucket list persists on refresh #8

Closed djbowen95 closed 1 year ago

djbowen95 commented 1 year ago

Bonus task from brief. Which React Hooks could we use in combination with local storage to make the bucket list persist after refreshes?

djbowen95 commented 1 year ago

Import useEffect hook
Run with a console log every time state is changed

djbowen95 commented 1 year ago

Add the bucket to local storage
Make sure the item is stringified for local storage
Log the value retrieved; make sure it is updated immediately

djbowen95 commented 1 year ago

Fetch the initial value for the state using a function, rather than an an array
Moved the function that returns the default values outside of the component, as it is needs to exist before state is initialised for React to find it
Conditional function that checks localStorage for bucket
Make sure to JSON.parse() the value returned by local storage

djbowen95 commented 1 year ago

Manually tested using localStorage.removeItem - this helped me identify a bug
Fixed bug This now is complete.