How to maintain state after a page refresh in React.js?

by

So my solution was to also set localStorage when setting my state and then get the value from localStorage again inside of the getInitialState callback like so:

getInitialState: function() {
    var selectedOption = localStorage.getItem( 'SelectedOption' ) || 1;

    return {
        selectedOption: selectedOption
    };
},

setSelectedOption: function( option ) {
    localStorage.setItem( 'SelectedOption', option );
    this.setState( { selectedOption: option } );
}

I’m not sure if this can be considered an Anti-Pattern but it works unless there is a better solution.

More Related Contents:

  1. How to add function in JSX?
  2. How to update nested state properties in React
  3. Why is setState in reactjs Async instead of Sync?
  4. React / JSX Dynamic Component Name
  5. Fetch request to local file not working
  6. How do I render components with different layouts/elements using react-router-dom v6
  7. Update style of a component onScroll in React.js
  8. Can I set state inside a useEffect hook
  9. How to overcome the CORS issue in ReactJS
  10. How to call an async function inside a UseEffect() in React?
  11. “Cannot use import statement outside a module” error when importing react-hook-mousetrap in Next.js
  12. How does shallow compare work in react
  13. React hooks: accessing up-to-date state from within a callback
  14. React.js – Communicating between sibling components
  15. React “after render” code?
  16. React.js – Syntax error: this is a reserved word in render() function
  17. ‘react-scripts’ is not recognized as an internal or external command
  18. onClick works but onDoubleClick is ignored on React component
  19. unable to scroll in scrollView
  20. Error “Error: A is only ever to be used as the child of element”
  21. How to clear react-native cache?
  22. How to use React.forwardRef in a class based component?
  23. React hooks useState setValue still rerender one more time when value is equal
  24. Can’t call setState on a component that is not yet mounted
  25. Redux Presentational Components Vs Container Component
  26. Converting Responsive Grid Layout to Plotly Dash
  27. JSX not allowed in files with extension ‘ .js’ with eslint-config-airbnb
  28. Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null [closed]
  29. how to render child components in react.js recursively
  30. Extending React.js components

Leave a Comment