React recipe box: How to save state on browser's local storage?

React recipe box: How to save state on browser's local storage?
0

#1

Hi,

I am learning react js these days and making the recipe box react app. Its almost done as I only need to add local storage feature in it. I am trying to add this feature for past couple of days but not getting any idea how to do this. Here is the project link - http://react-recipebox.surge.sh/

Here is my index.js file

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';

import App from './components/app';
import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware()(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <App />
  </Provider>
  , document.querySelector('#container'));

Please help me


#2

You can set get something from local storage by using localStorage.getItem('itemName') and set it by using localStorage.setItem('itemName', value). You can use it within this.state for a component with something like:

this.state = {
      name: localStorage.getItem('itemName') || <some default value>,
}