restoring radio button state after browser back button

[rfsch]

Hello

I have a simple react application with two pages. I am storing the selection state ('clicked') in a global mobx store.
page 1 1) select buttons on page one
2) click 'NEXT' button
page 2 3) display button state of page 1 buttons ('clicked/un-clicked')
4) click 'BACK' button
page 1 5) modify button state

when returning to page 1 in 5) the state of all buttons is lost. How can I use mobx to restore the button state ?

Thanks.

[mattruby]

Please create a small reproduction of what you are trying to do in codesandbox.io

…

On Mon, Feb 1, 2021, 11:40 AM Rupert Schaffarz ***@***.***> wrote: Hello I have a simple react application with two pages. I am storing the selection state ('clicked') in a global mobx store. page 1 1) select buttons on page one 2) click 'NEXT' button page 2 3) display button state of page 1 buttons ('clicked/un-clicked') 4) click 'BACK' button page 1 5) modify button state when returning to page 1 in 5) the state of all buttons is lost. How can I use mobx to restore the button state ? Thanks. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#2772>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABCW4XFSTJQJDD4KPWYOS3S43RP7ANCNFSM4W5GCBKA> .

[rfsch]

thanks for your help. Unfortunately my application is quite large and I was unable to upload to sandbox. I will try to explain.

1. I have a main component serving screens. It just hands out pages when the 'NEXT' and 'PREV' buttons are pressed.

  switch (step) {
    case 0:
      return <Page1 />;
    case 1:
      return <Page2 />;
    case 2:
      return <Page3 />;
    default:
      throw new Error('Unknown step');
  }

2. I have Page1

export default function Page1() {
  return (
    <React.Fragment>
      <Grid container spacing={3}>
        <Grid item xs={12} sm={6}>
            <FormControl component="fieldset">
            <FormLabel component="legend">Button 1</FormLabel>
            <RadioButtonGroupP1>
            </RadioButtonGroupP1>
            </FormControl>
       </Grid>
  </React.Fragment>

3. I have a Material-UI RadioGroup which is displayed in Page1

  const [value, setValue] = React.useState('female');

  const handleChange = (event) => {
    getUserStore().setState(event.target.labels[0].innerText);
    setValue(event.target.value);
  };

  return (
    <FormControl component="fieldset">
      <RadioGroup aria-label="gender" name="gender1" value={value} onChange={handleChange}>
        <FormControlLabel value="test" control={<Radio />} label="Person" />
      </RadioGroup>
    </FormControl>
  );
});

export default RadioButtonsGroupP1;

4. I have a global mobx store which stores the button state and is accessible to all pages using a factory class. I can display the state of RadioButtonsGroupP1 in Page2 just fine.

When I am setting the Radio button in RadioButtonsGroupP1 in Page1 and then click 'NEXT' and after that 'PREV' the button state disappears.
How can I restore the state of RadioButtonsGroupP1 when returning to Page1 using my mobx store ?
Or is there a simple approach I am missing ?

Sorry for the effort. I hope its somewhat understandable what I trying to do.

Thank you for your help!

Rupert

[mweststrate]

I recommend to try Stack Overflow (or any good book on front-end development), as this is more of a general front end development question than MobX specific, and depends for a big deal on the architecture of your application. There are many different ways to solve this, for example by storing state in your local- or session storage, your server session, or building a single page app that intercepts navigating back and forward using a client side router. However, all these solutions have little to do with MobX, except that all of them, except for using a router, will require you to serialize the state to store / transfer it, for which for example toJS can be used. But that really is the easier part of the question :)

[rfsch]

I understand but I was under the impression that mobx provides a session store. But I am unable to use it to restore my session state when navigating between pages.

[mweststrate]

Nope it doesn't

[danielkcz]

If you want help, we indeed need to see the runnable code. However, note that MobX itself has no mechanism built-in for persisting and restoring state. It's completely up to you how you approach it. Alternatively, there are more robust solutions like mobx-state-tree or mobx-keystone that makes persistence easier.

[rfsch]

I hope my comment above explains what I am trying to achieve. I was unfortunately not able to get it running in sandbox.

I have also tried this code :

  const handleChange = (event) => {
    getUserStore().setState(event.target.value);
    setValue(getUserStore().getButtonState(event.target.value));
  };

but then I get the following error:

Material-UI: A component is changing the controlled value state of RadioGroup to be uncontrolled.
Elements should not switch from uncontrolled to controlled (or vice versa).
Decide between using a controlled or uncontrolled RadioGroup element for the lifetime of the component.
The nature of the state is determined during the first render. It's considered controlled if the value is not undefined.
More info: https://fb.me/react-controlled-components

[danielkcz]

Never upload your large app in sandbox, that's not going to help anyone as it would be hard to find anything there. ALWAYS when trying to get help with some library try to create a MINIMAL example of what you are trying to achieve. The smaller example that shows your problem/question is much more valuable than sending your whole thing our way and expecting we would want to look at it.

Once again, you have to deal with persistence on your own as that's always specific to app requirements and can't be really generalized.