FavoritesContext: pattern for adding, removing from state
Thu Jul 27 2023 16:14:50 GMT+0000 (Coordinated Universal Time)
Saved by
@csprofessorpam
#react.js
import {useState, createContext, useEffect} from 'react'
export const FavoritesContext = createContext();
export default function FavoritesContextProvider(props){
//create the global state
const [favorites, setFavorites] = useState([])
//get inital state from localStorage when page loads
useEffect(
()=>{
console.log('context loaded', favorites)
//is there a value in localStorage
const storedFavs = localStorage.getItem('favoritesList')
//check if something was there
if (storedFavs){
console.log('use localstorage')
//console.log('datatype is ', typeof(storedDarkMode))
//setDarkMode(storedDarkMode)
//parse converts from string to its datatype
setFavorites(JSON.parse(storedFavs))
}
//otherwise will use default state value
}, []
)
//save to localStorage whenever it changes
useEffect(
()=>{
console.log('favorites updated', favorites)
//save current state to localStorage when it changes
//stringify converts to JSON string format
localStorage.setItem('favoritesList', JSON.stringify(favorites))
}, [favorites]
)
const addCharacter = (charToAdd) =>{
console.log('adding', charToAdd)
let newFavorites;
newFavorites = [...favorites, charToAdd]
setFavorites(newFavorites)
// localStorage.setItem('favoritesList', JSON.stringify(newFavorites))
}
const removeCharacter = (charId) =>{
console.log("remove", charId)
let newFavorites;
newFavorites = favorites.filter(item => item.id !== charId)
setFavorites(newFavorites)
// localStorage.setItem('favoritesList', JSON.stringify(newFavorites))
}
return(
<FavoritesContext.Provider value={{ favorites, addCharacter, removeCharacter }} >
{props.children}
</FavoritesContext.Provider>
)
}
content_copyCOPY
Comments