State is not preserved between tabs

[hfirst]

I added a checkbox to your Product Details tab. I check the box on. I then switch to another tab and then back again. The checkbox is now unchecked.

export function ProductGeneralTab() {

  const [checked, setChecked] = useState(false);

  const handleChange = () => {
    setChecked(!checked);
  };

  return ( 
      <div>
          <div>
            General
          </div>
          <div>
            <label>
              <input
                type="checkbox"
                checked={checked}
                onChange={handleChange} />
              My Value
            </label>

            <p>Is "My Value" checked? {checked.toString()}</p>
          </div>
        </div> 
      );
}

[layerok]

Yeah, this is not yet implemented. We need some kind of mechanizm of saving and restoring the tab's ui state. I am still in the process of figuring this out.

Where to save the state?

1. localStorage/sessionStorage
2. memory
3. url
4. database
5. ...

When to save the state?

1. On form field change. When the user checked the checkbox.
2. On active tab change. When the user switched the tab.
3. setInterval
4. ...