title: How to remove item from array using localStorage.removeItem?
body: <p>I'm using <code>localStorage.setItem</code> and <code>localStorage.getItem</code> to store data (devices, in my case) from an API to persist through page resets. When a device is clicked on, it gets stored into a shopping bag. When the user clicks a device in the bag, I want it to be able to "delete" and be removed from the local storage.
  Right now it work so that on the UI it shows that it's being removed, but when the page refreshes it comes back because it's still in the localStorage.</p>
  
  <p>I've tried to use <code>localStorage.removeItem(deviceTitle)</code> in my <code>removeDevice</code> function, but it doesn't seem to do anything. Is this because I have the <code>localStorage.getItem</code> in the <code>componentDidMount</code>? If so, how do I go about changing that so the <code>removeItem</code> function will work?</p>
  
  <p><code>addDevice()</code> is called during by onClick function (please let me know if you need to see that portion of the code)</p>
  
  <pre><code>  addDevice = (e, deviceTitle) =&gt; {
      const array = Array.from(this.state.bag);
      if (array.indexOf(deviceTitle) === -1) {
        array.push(deviceTitle);
      } else {
        return;
      }
      localStorage.setItem("list", JSON.stringify(array));
      this.setState({
        bag: array
      });
    };
  </code></pre>
  
  <p>Here is where the the device is supposed to be removed from local storage</p>
  
  <pre><code>removeDevice = (e, deviceTitle) =&gt; {
      this.setState(prevState =&gt; ({
        bag: prevState.bag.filter(d =&gt; d !== deviceTitle)
      }));
      localStorage.removeItem(deviceTitle);
    };
  </code></pre>
  
  <p>and this is my componentDidMount() where the devices get stored</p>
  
  <pre><code>componentDidMount() {
      this.search("");
      const storedList = JSON.parse(localStorage.getItem("list"));
      console.log(storedList);
      const bag = storedList;
      this.setState({ bag });
    }
  </code></pre>
  
  <p>EDIT more code added below:</p>
  
  <pre><code>  render() {
      return (
        &lt;div&gt;
          &lt;form&gt;
            &lt;input
              type="text"
              placeholder="Search for devices..."
              onChange={this.onChange}
            /&gt;
            {this.state.devices.map(device =&gt; (
              &lt;ul key={device.title}&gt;
                &lt;p&gt;
                  {device.title}{" "}
                  &lt;i
                    className="fas fa-plus"
                    style={{ cursor: "pointer", color: "green" }}
                    onClick={e =&gt; this.addDevice(e, device.title)}
                  /&gt;
                &lt;/p&gt;
              &lt;/ul&gt;
            ))}
          &lt;/form&gt;
          {this.state.bag.map(device =&gt; (
            &lt;p key={device.title}&gt;
              {device}
              &lt;i
                className="fas fa-times"
                style={{ cursor: "pointer", color: "red" }}
                onClick={e =&gt; this.removeDevice(e, device)}
              /&gt;
            &lt;/p&gt;
          ))}
          &lt;button onClick={e =&gt; this.removeAll(e)}&gt;Remove all&lt;/button&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>Here are screenshots of how it looks:
  <a href="https://i.stack.imgur.com/ucIr2.png" rel="nofollow noreferrer">items in local storage</a>,
  <a href="https://i.stack.imgur.com/7oVFc.png" rel="nofollow noreferrer">items after being removed in the UI</a>
  but when I reset the page, it reverts back to the first image because the devices weren't removed from localStorage</p>