Object is possibly null error (typescript) when trying to display the value of an array which is stored in localstorage

user_12092213 0
Viewed 2618

I'm currently creating a weather app where you can store your favorite locations which are pushed to an array, which in turn is stored in localstorage.

Now, I want to display the values of the array in a different component, but with my code I keep stumbling upon the error that the object is possible null.

export const FavoritesList: React.FC<any> = () => {
  // const storageFavorites = localStorage.getItem('favorites');
  const lsOutput = document.getElementById('lsOutput');
  for (let i = 0; i < localStorage.length; i++) {
    const key: any = localStorage.key(i);
    const value: any = localStorage.getItem(key);
    // console.log(value);
    value.forEach(
      (item: any) => (lsOutput.innerHTML += `<li>${item}</li><br/>`)
    );
  }
  return (
    <div>
      <ul id="lsOutput"></ul>
    </div>
  );
};

and it points specifically at lsOutput.innerHTML

What am I doing wrong? I've currently assigned everything as any just to try to make it work first. Thank you very much in advance!

react-tsx eslint-config-airbnb typescript reactjs javascript
1 Answers

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.

user_1572470
Related