ryanjyost

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import SimpleStorage from "react-simple-storage";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      newItem: "",

ryanjyost

//... everything is the same above
render() {
    return (
      <div className="App">
      
        {/* This is all you need to add */}
        <SimpleStorage parent={this} />
       
        //...etc.

ryanjyost

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import SimpleStorage from "react-simple-storage";

class App extends Component {
//... etc.

ryanjyost

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      newItem: "",
      list: []

ryanjyost

componentDidMount() {
    this.hydrateStateWithLocalStorage();

    // add event listener to save state to localStorage
    // when user leaves/refreshes the page
    window.addEventListener(
      "beforeunload",
      this.saveStateToLocalStorage.bind(this)
    );
}

ryanjyost

 saveStateToLocalStorage() {
    // for every item in React state
    for (let key in this.state) {
      // save to localStorage
      localStorage.setItem(key, JSON.stringify(this.state[key]));
    }
  }

ryanjyost

 componentDidMount() {
    this.hydrateStateWithLocalStorage();
 }

ryanjyost

hydrateStateWithLocalStorage() {
    // for all items in state
    for (let key in this.state) {
      // if the key exists in localStorage
      if (localStorage.hasOwnProperty(key)) {
        // get the key's value from localStorage
        let value = localStorage.getItem(key);

        // parse the localStorage string and setState
        try {

ryanjyost

deleteItem(id) {
  // copy current list of items
  const list = [...this.state.list];
  // filter out the item being deleted
  const updatedList = list.filter(item => item.id !== id);

  this.setState({ list: updatedList });

  // update localStorage
  localStorage.setItem("list", JSON.stringify(updatedList));

ryanjyost

addItem() {
    // create a new item
    const newItem = {
      id: 1 + Math.random(),
      value: this.state.newItem.slice()
    };

    // copy current list of items
    const list = [...this.state.list];