title: Local storage in react todo list
body: <p>I created to do list using react, but I want it to be local storage -  so when the user refresh the page it still saved the items and will present them.
  I read I need to use localStorage but I'm not sure where and how, attach the app.js and TodoItem component</p>
  <pre><code>class App extends Component {
    state = {
      items: [],
      id: uuidv4(),
      item: &quot;&quot;,
      editItem: false
    };
    handleChange = e =&gt; {
      ...
    };
    handleSubmit = e =&gt; {
      e.preventDefault();
      const newItem = {
        id: this.state.id,
        title: this.state.item
      };
      const updatedItems = [...this.state.items, newItem];
  
      this.setState({
        items: updatedItems,
        item: &quot;&quot;,
        id: uuidv4(),
        editItem: false
      });
    };
    ...
    render() {
      return (
              &lt;TodoInput
                item={this.state.item}
                handleChange={this.handleChange}
                handleSubmit={this.handleSubmit}
                editItem={this.state.editItem}
              /&gt;
              &lt;TodoList
                items={this.state.items}
                clearList={this.clearList}
                handleDelete={this.handleDelete}
                handleEdit={this.handleEdit}
              /&gt;
      );
    }
  }
  </code></pre>
  <pre><code>export default class TodoItem extends Component {
    state = {
      avatarURL: '',
    }
  
    componentDidMount() {
      imgGen().then(avatarURL =&gt; this.setState({ avatarURL }));
    }
  
    render() {
      const { title, handleDelete, handleEdit } = this.props;
      const { avatarURL } = this.state; 
      return (
          &lt;h6&gt;{title}&lt;/h6&gt;
            &lt;span className=&quot;mx-2 text-success&quot; onClick={handleEdit}&gt;
            &lt;/span&gt;
            &lt;span className=&quot;mx-2 text-danger&quot; onClick={handleDelete}&gt;
            &lt;/span&gt;
      );
    }
  }
  </code></pre>