title: Implementing localStorage in my React application
body: <p>I'm currently doing the freeCodeCamp React challenge <a href="https://www.freecodecamp.com/challenges/build-a-recipe-box" rel="nofollow noreferrer">Building a Recipe Box</a>.
  I have to fulfil the User Story of using HTML5 web storage to save changes made by the user so that even when the page is refreshed the changes remain. However I built <a href="http://codepen.io/furball/pen/NpRQpz" rel="nofollow noreferrer">my React Application</a> without planning this beforehand , and now I'm stuck in a situation where I don't know how to add this functionality to my app.</p>
  
  <p>P.S  I tried using global variables and setting state along with setting local storage . I'm new to React.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/*-------------------------------------------------------------------------*/
  var RecipeEdit = React.createClass({
    getInitialState: function() {
      return {
        titleOne: 'Sakkarai Pongal Recipe (Sweet Pongal Recipe)',
        urlOne: 'https://4.bp.blogspot.com/-a1NWFkB9xLU/U1Er4eD_vlI/AAAAAAAAd-w/tUECZ8OUCKw/s1600/sakkarai+pongal+recipe.jpg',
        contentOne: 'Ingredients: Raw rice - 1 cup,Mung bean - 2 to 4 tbsp,Jaggery - 1 cup,Clarified butter - 1/4 cup (can adjust as per preference),Cardamom - 1,Water for cooking rice - 6 cups,Milk - 2 tbsp,Water for jaggery syrup - 1/2 cup,Edible camphor - mustard seed size,Clove - 1,Nutmeg powder- a pinch ,Salt - a pinch (optional),Cashews, raisins - 1 tbsp each',
  
        titleTwo: 'Medhu Vadai / Ulundu Vadai Recipe',
        urlTwo: 'https://3.bp.blogspot.com/-7qyx9n0Wyxo/UKC3ECH8QGI/AAAAAAAAbs4/WN-0u5cVUxU/s1600/Ulundhu-vadai--Medhu-vadai.jpg',
        contentTwo: 'Ingredients: Black lentil - 3/4 cup,Small onion, shallots(or Big onion – 1) - 10 ,Green pimento pepper - 2 ,Ginger - 1 inch piece,Coriander leaves - 2 tblp, chopped.,Curry leaves - A sprig,Asafoetida - 3-4 pinches,Salt - As needed,Water - As needed',
  
        titleThree: 'Neer Mor (Recipe For Spiced Buttermilk)',
        urlThree: 'http://farm9.staticflickr.com/8244/8638427263_fc66ac04a3_z.jpg',
        contentThree: 'Ingredients: Plain yogurt - 1 cup,Water - 4 cups,Green pimento pepper - 2,Chopped ginger - 1 tblsp,Chopped cilantro - 1 tblsp,Chopped curry leaves - 1 sprig,Salt - As needed,Asafoetida - 1 pinch,Lemon(optional) - 1/2'
      };
      //localStorage.setItem('Furball_Default', //JSON.stringify(this.state));
    },
  
   /* componentWillMount: function() {
      var PreviousData = JSON.parse(localStorage.getItem('Furball_Default'));
      if (PreviousData) {
        this.setState({
          [this.state]: PreviousData
        });
      }
    },*/
  
    handleTitle1Change: function(event) {
      this.setState({
        titleOne: event.target.value
      });
     // localStorage.setItem('Furball_Default', //JSON.stringify(this.state));
    },
  
    handleTitle2Change: function(event) {
      this.setState({
        titleTwo: event.target.value
      });
     // localStorage.setItem('Furball_Default', //JSON.stringify(this.state));
    },
  
    handleTitle3Change: function(event) {
      this.setState({
        titleThree: event.target.value
      });
     // localStorage.setItem('Furball_Default', //JSON.stringify(this.state));
    },
  
    handleUrl1Change: function(event) {
      this.setState({
        urlOne: event.target.value
      });
      //localStorage.setItem('Furball_Default', //JSON.stringify(this.state));
    },
  
    handleUrl2Change: function(event) {
      this.setState({
        urlTwo: event.target.value
      })
    },
  
    handleUrl3Change: function(event) {
      this.setState({
        urlThree: event.target.value
      });
      //localStorage.setItem('Furball_Default', //JSON.stringify(this.state));
    },
  
    handleContent1Change: function(event) {
      this.setState({
        contentOne: event.target.value
      });
     // localStorage.setItem('Furball_Default', //JSON.stringify(this.state));
    },
  
    handleContent2Change: function(event) {
      this.setState({
        contentTwo: event.target.value
      });
     // localStorage.setItem('Furball_Default', //JSON.stringify(this.state));
    },
  
    handleContent3Change: function(event) {
      this.setState({
        contentThree: event.target.value
      });
      //localStorage.setItem('Furball_Default', //JSON.stringify(this.state));
    },
  
    render: function() {
      return (&lt;section&gt; 
                &lt;div className="card small horizontal pink lighten-4 z-depth-4"&gt;
                 &lt;div className="card-image waves-effect waves-block waves-light"&gt;
                  &lt;img className="activator" src={this.state.urlOne} /&gt; 
      &lt;/div&gt;
        
      &lt;div className="card-content"&gt;
        &lt;span className="card-title activator grey-text text-darken-4"&gt;{this.state.titleOne}&lt;/span&gt;
      &lt;/div&gt;&lt;a className="waves-effect waves-light btn red z-depth-5 del"&gt;Delete &amp;nbsp;&lt;span className="fa fa-trash-o fa-lg"&gt; &lt;/span&gt;&lt;/a&gt;
      &lt;div className="card-reveal"&gt;
        &lt;span className="card-title"&gt;&lt;i className="material-icons right"&gt;close&lt;/i&gt;&lt;/span&gt; &lt;div className="input-field inline"&gt;
            &lt;input type="text" onChange={this.handleTitle1Change} value={this.state.titleOne} /&gt; 
            &lt;label htmlFor="title"&gt;Title&lt;/label&gt;
          &lt;/div&gt; &amp;nbsp; &lt;div className="input-field inline"&gt;
            &lt;input type="text" onChange={this.handleUrl1Change} value={this.state.urlOne} /&gt; 
            &lt;label htmlFor="url"&gt;Image URL&lt;/label&gt;
          &lt;/div&gt;&lt;div className="input-field"&gt;
        &lt;textarea type="text" className="materialize-textarea" onChange={this.handleContent1Change} value={this.state.contentOne} /&gt; &lt;label&gt;Ingredients/Directions &lt;/label&gt; &lt;/div&gt;
      &lt;/div&gt;
        &lt;/div&gt; 
       &lt;div className="card small horizontal brown lighten- z-depth-4"&gt;
      &lt;div className="card-image waves-effect waves-block waves-light"&gt;
        &lt;img className="activator" src={this.state.urlTwo} /&gt; 
      &lt;/div&gt;  
      &lt;div className="card-content"&gt;
        &lt;span className="card-title activator grey-text text-darken-4"&gt;{this.state.titleTwo}&lt;/span&gt;
      &lt;/div&gt;
         &lt;a className="waves-effect waves-light btn red z-depth-5 del"&gt;Delete &amp;nbsp;&lt;span className="fa fa-trash-o fa-lg"&gt; &lt;/span&gt;&lt;/a&gt;
      &lt;div className="card-reveal"&gt;
        &lt;span className="card-title"&gt;&lt;i className="material-icons right"&gt;close&lt;/i&gt;&lt;/span&gt; &lt;div className="input-field inline"&gt;
            &lt;input type="text" onChange={this.handleTitle2Change} value={this.state.titleTwo} /&gt; 
            &lt;label htmlFor="title"&gt;Title&lt;/label&gt;
          &lt;/div&gt; &amp;nbsp; &lt;div className="input-field inline"&gt;
            &lt;input type="text" onChange={this.handleUrl2Change} value={this.state.urlTwo} /&gt; 
            &lt;label htmlFor="url"&gt;Image URL&lt;/label&gt;
          &lt;/div&gt;&lt;div className="input-field"&gt;
        &lt;textarea onChange={this.handleContent2Change} type="text" className="materialize-textarea" value={this.state.contentTwo} /&gt; &lt;label&gt;Ingredients/Directions &lt;/label&gt; &lt;/div&gt;
      &lt;/div&gt;
        &lt;/div&gt;  
         
    &lt;div className="card small horizontal lime z-depth-4"&gt;
      &lt;div className="card-image waves-effect waves-block waves-light"&gt;
        &lt;img className="activator" src={this.state.urlThree} /&gt; 
      &lt;/div&gt;  
      &lt;div className="card-content"&gt;
        &lt;span className="card-title activator grey-text text-darken-4"&gt;{this.state.titleThree}&lt;/span&gt;
      &lt;/div&gt;&lt;a className="waves-effect waves-light btn red z-depth-5 del"&gt;Delete &amp;nbsp;&lt;span className="fa fa-trash-o fa-lg"&gt; &lt;/span&gt;&lt;/a&gt;
      &lt;div className="card-reveal"&gt;
        &lt;span className="card-title"&gt;&lt;i className="material-icons right"&gt;close&lt;/i&gt;&lt;/span&gt; &lt;div className="input-field inline"&gt;
            &lt;input type="text" onChange={this.handleTitle3Change} value={this.state.titleThree} /&gt; 
            &lt;label htmlFor="title"&gt;Title&lt;/label&gt;
          &lt;/div&gt; &amp;nbsp; &lt;div className="input-field inline"&gt;
            &lt;input type="text" onChange={this.handleUrl3Change} value={this.state.urlThree} /&gt; 
            &lt;label htmlFor="url"&gt;Image URL&lt;/label&gt;
          &lt;/div&gt;&lt;div className="input-field"&gt;
        &lt;textarea onChange={this.handleContent3Change} type="text" className="materialize-textarea" value={this.state.contentThree} /&gt; &lt;label&gt;Ingredients/Directions &lt;/label&gt; &lt;/div&gt;
      &lt;/div&gt;
        &lt;/div&gt;  &lt;Form /&gt;      
        &lt;/section&gt;);
    }
  });
  /*-------------------------------------------------------------------------*/
  
  var Form = React.createClass({
    getInitialState: function() {
      return {
        title: '',
        url: '',
        content: '',
        clicked: false,
        newCardArr: []
      };
    },
  
    updateT: function(val) {
      this.setState({
        title: val.target.value
      });
      console.log(this.state.title);
     // localStorage.setItem('Furball_New', //JSON.stringify(this.state));
    },
  
    updateU: function(val) {
      this.setState({
        url: val.target.value
      });
      console.log(this.state.url);
      //localStorage.setItem('Furball_New', //JSON.stringify(this.state));
    },
  
    updateC: function(val) {
      this.setState({
        content: val.target.value
      });
      console.log(this.state.content);
     // localStorage.setItem('Furball_New', //JSON.stringify(this.state));
    },
  
    onClick: function() {
      this.setState({
        clicked: true,
        newCardArr: [&lt;Create key={Math.random()} title={this.state.title} url={this.state.url} content={this.state.content} /&gt;, ...this.state.newCardArr]
      });
    },
  
    render: function() {
      return (&lt;div&gt;  {this.state.clicked ? this.state.newCardArr : null}
        &lt;div className="center-align"&gt;
                  &lt;ul className="collapsible" data-collapsible="accordion"&gt;
      &lt;li&gt; 
        &lt;div className="collapsible-header btn-floating btn-large waves-effect waves-light red z-depth-5"&gt;&lt;i className="material-icons"&gt;edit&lt;/i&gt; &lt;/div&gt;&lt;h6&gt;Add New Recipe &lt;/h6&gt; 
        &lt;div className="collapsible-body"&gt;&lt;span&gt;&lt;div className="input-field inline"&gt;
            &lt;input id="title" type="text" onChange={this.updateT}/&gt; 
            &lt;label className="cyan-text" htmlFor="title"&gt;Title&lt;/label&gt;
          &lt;/div&gt; &amp;nbsp; &lt;div className="input-field inline"&gt;
            &lt;input type="text" onChange={this.updateU} /&gt; 
            &lt;label className="cyan-text" htmlFor="url"&gt;Image URL&lt;/label&gt;
          &lt;/div&gt;&lt;div className="input-field"&gt;
        &lt;textarea type="text" className="materialize-textarea" onChange={this.updateC} /&gt; &lt;label className="cyan-text"&gt;Ingredients/Directions &lt;/label&gt; &lt;/div&gt;&lt;button className="btn waves-effect waves-light z-depth-5" onClick={this.onClick} type="submit" name="action"&gt;Submit
      &lt;i className="material-icons right"&gt;send&lt;/i&gt;
    &lt;/button&gt; &lt;/span&gt;&lt;/div&gt;
      &lt;/li&gt;
      &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt;)
  
    }
  });
  /*-------------------------------------------------------------------------*/
  
  var Create = React.createClass({
    getInitialState: function() {
      return {
        title: '',
        url: '',
        content: ''
      };
    },
  
    componentWillMount: function() {
      this.setState({
        title: this.props.title,
        url: this.props.url,
        content: this.props.content
      });
     /* var PreviousData = JSON.parse(localStorage.getItem('Furball_New'));
      if (PreviousData) {
        this.setState({
          [this.state]: PreviousData
        });
      }*/
    },
  
    onChange: function(event) {
      this.setState({
        [event.target.id]: event.target.value
      });
     // localStorage.setItem('Furball_New', //JSON.stringify(this.state));
    },
  
    render: function() {
      console.log(this.state);
      return (&lt;div className="card small horizontal z-depth-4"&gt;&lt;div className="card-image waves-effect waves-block waves-light"&gt;
        &lt;img className="activator" src={this.state.url} /&gt; 
      &lt;/div&gt; &lt;div className="card-content"&gt;
        &lt;span className="card-title activator grey-text text-darken-4"&gt;{this.state.title}&lt;/span&gt;
      &lt;/div&gt;&lt;a className="waves-effect waves-light btn red z-depth-5 del"&gt;Delete &amp;nbsp;&lt;span className="fa fa-trash-o fa-lg"&gt; &lt;/span&gt;&lt;/a&gt;&lt;div className="card-reveal"&gt;
        &lt;span className="card-title"&gt;&lt;i className="material-icons right"&gt;close&lt;/i&gt;&lt;/span&gt; &lt;div className="input-field inline"&gt;
            &lt;input type="text" id="title" value={this.state.title} onChange={this.onChange} /&gt; 
            &lt;label htmlFor="title"&gt;Title&lt;/label&gt;
          &lt;/div&gt; &amp;nbsp; &lt;div className="input-field inline"&gt;
            &lt;input type="text" id="url" onChange={this.onChange} value={this.state.url} /&gt; 
            &lt;label htmlFor="url"&gt;Image URL&lt;/label&gt;
          &lt;/div&gt;&lt;div className="input-field"&gt;
        &lt;textarea type="text" className="materialize-textarea" id="content" onChange={this.onChange} value={this.state.content} /&gt; &lt;label&gt;Ingredients/Directions &lt;/label&gt; &lt;/div&gt;
      &lt;/div&gt;&lt;/div&gt;);
  
    }
  });
  /*-------------------------------------------------------------------------*/
  
  ReactDOM.render(&lt;RecipeEdit /&gt;, document.getElementById('app'));
  /*-------------------------------------------------------------------------*/
  // var recipes = [];
  /*componentWillMount: function() {
      var PreviousData = JSON.parse(localStorage.getItem('Furball_RecipesBox'));
      if (PreviousData) {
        this.setState({
          [this.state]: PreviousData
        });
      }
    },
    
    componentDidUpdate: function(prevProps, prevState) {
      localStorage.setItem('Furball_RecipesBox', JSON.stringify(this.state));
    },*/
  /* &lt;div&gt;var recipes = []; array={recipes}
              &lt;Button onClick={this.handleClick} /&gt;
          var array= [this.props.array];
      array.push(this.state);     
            &lt;/div&gt;*/
  // setTimeout(this.after, 5000);
  // setTimeout( this.setState({
  //   clicked: true
  //  }),6000)
  //e.preventDefault();
  //console.log(this.props.array);
  /* componentWillMount: function() {
      var PreviousData = JSON.parse(localStorage.getItem('Furball_RecipesBox'));
      if (PreviousData) {
        this.setState({
          [this.state]: PreviousData
        });
      }
    },
  
    componentWillUnmount: function() {
      this.setState({
        [this.props.array]: this.state
      });
      console.log(this.props.array);
      localStorage.setItem('Furball_RecipesBox', JSON.stringify(this.props.array)); 
    }, */</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    background-image: url("http://cdn.backgroundhost.com/backgrounds/subtlepatterns/retina_wood.png");
  }
  
  #app {
    margin: 15px;
  }
  
  .card {
    border-radius: 7%;
  }
  
  .del {
    margin-right: 15px;
    margin-top: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;
  &lt;div id="app"&gt; &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>