title: Redux-Persist Changes State after Application is ReHydrated
body: <p>Working on something similar to Jotform.</p>
  <p>This is my state:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const InitialState = {
    BaseContainerEl: []
  }</code></pre>
  </div>
  </div>
  </p>
  <p>This is my approach, let's say I want to create Full Name fields (i.e three inputs with first, middle and last names). So, I create a component that renders a p-tag and onClick it runs the updateBase function where I stored the exact result (i.e the 3 inputs) in a variable 'el' and it update's the state using the virtual DOM created and stored in 'el'.
  <strong>And it works fine, because after updating the state I render the element.</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const FullName = (props: any) =&gt; {
  
    const updateBase = () =&gt; {
      const key = uuidv4();
      const el = (
        &lt;BaseContainer key={key} id={key}&gt;
          &lt;InputCustom
            placeholder='First Name'
            type='text'
            label='First Name'
            formControl='form-control form-control-sm'
            style={{ width: '90%' }}
          /&gt;
          &lt;InputCustom
            placeholder='Middle Name'
            type='text'
            label='Middle Name'
            formControl='form-control form-control-sm'
            style={{ width: '90%' }}
          /&gt;
          &lt;InputCustom
            placeholder='Last Name'
            type='text'
            label='Last Name'
            formControl='form-control form-control-sm'
            style={{ width: '90%' }}
          /&gt;
        &lt;/BaseContainer&gt;
      );
  
      props.updateBaseContainerEl(el)
    }
    return (
      &lt;p draggable onClick={updateBase} className="text-muted" style={{
        borderRadius: '2px',
        boxShadow: ' 20px 20px 60px #bebebe-20px -20px 60px #ffffff',
      }}&gt;
        &lt;i className="fe fe-user" style={{
        }}&gt;&lt;/i&gt;
        Full Name
      &lt;/p&gt;
    );
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>This the problem:
  I am persisting the state using redux-persit, now when I refresh the application it rehydrates and after rehydration the virtual DOM stored in the state (i.e the react component) changes with some properties and values missing. According to the redux-persist docs, there are some values in javascript that cannot be represented in json.</p>
  <p>So, it errors out: <code>Uncaught Error: Objects are not valid as a React child (found: object with keys {type, key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead.</code></p>
  <p>Below are images of what it looks like before rehydration and after.
  <a href="https://i.stack.imgur.com/Tet54.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Tet54.png" alt="Before Hydration" /></a></p>
  <p><a href="https://i.stack.imgur.com/BYHqq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BYHqq.png" alt="After hydration" /></a></p>
  <p>Is there any way around this?</p>