Load same configuration after component is re-rendered or the page is refreshed in react

Question

I created a component in react that displays table.

The process is executed in this way:

1. Enter api url and hit Load Button -->

2. Select the functionalities you want with the table (like Sortable columns, resizable columns, search implementation, responsiveness, row reorder, download data, multiselect columns and draggable columns) -->

3. Click Load Table button to load table.

The entire process is happening but if i refresh the page, it starts from all over again. I have to re enter the api, select functionalities and load table. Is there any way that i can store the api and functionalities so that next time if i load the page it takes previous configuration.

Also if i call the component twice, at two different places in the same webpage. The configuration should be different for the other component. How can i implement that?

Answer 1

To persist the state of your components in React, you could use SessionStorage. This is a built in storage which you can use to store JSON objects in the browser of the user. See https://developer.mozilla.org/nl/docs/Web/API/Window/sessionStorage for more information.

Answer 2

You can start with something quite simple, using LocalStorage

// Read
let yourConfigObject = JSON.parse(window.localStorage.getItem('config'));

// Write
window.localStorage.setItem('config', JSON.stringify(yourConfigObject)); 

Your process will become :

1 - Enter API url and hit load button.

2 - Check existing config using LocalStorage.getItem. If there is no such config, let the user select the options he wants.

3 - Persist the options using LocalStorage.setItem, then load all the data .

Answer 3

As commented before:

You need to persist values. You can look at SessionStorage or any HTML5 storage. For your reference: Keep input value after refresh page

Idea:

• Create a component which takes 2 function callbacks
  • initState: This will initialize the state and initial behavior. This can be done outside as well. Its on your preference.
  • clickCallback or actionDispatcher: This will be called on a specific event and will be responsible for setting value to state.

Basic idea is to keep the component as dumb as possible. They will be responsible only for user interactions. All data manipulation/ loading will be done in reducer or any other function.

Following is a simplified example:

const { useState, useEffect } = React;

const DummyComp = (props) => {
  const [ loaded, setLoaded ] = useState(false);
  const [ msg, setMsg ] = useState('');
  useEffect(() => {
    loaded && setMsg('Data has been loaded. Calling callback');
    props.onLoadHandler && props.onLoadHandler();
  }, [ loaded ])
  return (
    <div>
      <p> { msg } </p>
      <button disabled={loaded} onClick={() => setLoaded(true)}>Load Data</button>
    </div>
  )
}

const MyApp = () => {
  const handler1 = () => console.log('Dispatching event 1');
  const handler2 = () => console.log('Dispatching event 2');
  return (
    <div>
      <DummyComp onLoadHandler={() => handler1}/>
      <DummyComp onLoadHandler={() => handler2}/>
    </div>
  )
}

ReactDOM.render(<MyApp/>, document.querySelector('.content'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>
<div class='content'></div>