Quiero que MyList represente lo que sea que esté en localStorage (funciona muy bien), sin embargo, cuando no hay nada en el almacenamiento local y represento el componente, aparece vacío. Me gustaría tener un marcador de posición allí para cuando eso ocurra. ¿Cómo puedo hacer eso mejor?
const MyList = ({setDrinks}) => { const setMyList = () => { let parsedData = JSON.parse(localStorage.getItem('favoriteDrinks')) setDrinks(parsedData) } return ( <div> <button className="my-list" onClick={setMyList}>My List</button> </div> ) } export default MyListPuede asignar un marcador de posición aleatorio si su localStorage no tiene datos. Aquí hay una solución mínima:
const MyList = ({setDrinks}) => { const setMyList = () => { const myDrinks = localStorage.getItem('favoriteDrinks'); if (!myDrinks) { setDrinks({ message: "No drinks found!" }); return; } let parsedData = JSON.parse(myDrinks); setDrinks(parsedData); } return ( <div> <button className="my-list" onClick={setMyList}>My List</button> </div> ) } export default MyList