TypeScript is warning you that getElementById can return null (if there's no element with that ID). If you know that the element will exist, you an reassure TypeScript with a non-null assertion:
const lsOutput = document.getElementById('lsOutput')!;
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^
(But I don't think you do know that, see under the bar below.)
You'll have the same problem later with value. The analysis TypeScript does isn't deep enough to know that you're getting key from localStorage.key(i) and so you know localStorage.getItem(key) will return a non-null value. So again, you have to tell it that:
const value: any = localStorage.getItem(key)!;
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^
But there's another problem: value.forEach will never be defined in that code. localStorage only stores strings, not arrays, and strings don't have a forEach method.
When I want to store complex data in localStorage, I use JSON. For instance:
// Storing an array (or object)
localStorage[key] = JSON.stringify(theArray);
// Retrieving:
const theArray = JSON.parse(localStorage[key]);
You're trying to work directly with the DOM within a React component, which is rarely necessary. When it is necessary, the way you're doing it isn't best practice (and won't work unless you already have a different element with the ID lsOutput, in which case you're creating a DOM with an invalid structure — you can't have two elements with the same id value). When your component function runs, the output you return from it won't be in the DOM yet.
Instead, do it the React way:
export const FavoritesList: React.FC<any> = () => {
const items = [];
for (let i = 0; i < localStorage.length; i++) {
const key: any = localStorage.key(i);
const value: any = localStorage.getItem(key);
items.push(value);
}
return (
<div>
<ul>{items.map(item => <li>{item}</li>}</ul>
</div>
);
};
I'd also recommend using a single storage entry to hold that array of items, using JSON as shown above:
export const FavoritesList: React.FC<any> = () => {
const items: string[] = JSON.parse(localStorage.getItem("favorites"))!;
return (
<div>
<ul>{items.map(item => <li>{item}</li>}</ul>
</div>
);
};
It might also make sense not to go to local storage every time the component function is called; perhaps load the items in a parent component and pass them down as props.
