Share a component between queries but load different component containers

[paulcredmond]

Say you have a form component called <SignUpForm /> and you want it wrapped in different components for mobile and desktop - <Mobile /> which provides a swiping experience and <Desktop /> which is a normal form layout.

export class App extends React.Component {
  render() {
    return (
    <section>
      <MediaQuery maxWidth={767} component={Mobile}>
        <SignUpForm />
      </MediaQuery>
      <MediaQuery minWidth={768} component={Desktop}>
        <SignUpForm />
      </MediaQuery>        
    </section>
    );
  }
}

I thought I could use the load component feature to use these wrappers... the above does work in terms of loading the form in the right containers, but any field data filled out in one is lost when resizing the browser as it's loading a new instance of the component. Can I prevent this from happening?

[yocontra]

Ternary:

<MediaQuery maxWidth={767} component={Mobile}>
  {(matches) => matches ? <SignUpMobile /> : <SignUpDesktop />}
</MediaQuery>

Property:

<MediaQuery maxWidth={767} component={Mobile}>
  {(matches) => <SignUp mobile={matches} />}
</MediaQuery>

Put a key on the child to keep it from rendering a new one if you don't want that behavior.

[paulcredmond]

Thanks for the reply. Only the wrapper component is different, not the <SignUpForm /> I used in the example above. I tried your example but the same thing happens... <SignUpForm /> re-renders when changing breakpoint. How can I use keys to stop that happening?

[yocontra]

@paulcredmond https://stackoverflow.com/ for questions like this, github issues is for bug reports only.

[jannisg]

Sorry for the reply to an old, closed, issue but I have been banging my head against this same issue too and after hours trying to figure this out cannot seem to implement either of your suggested options @contra.

I've tried:

• Explicit key=""
• Ternary (with and without key="")

A super simplified test case is available here inside the LayoutManager.jsx file: https://codesandbox.io/s/oq487n1j9

@paulcredmond did you ever figure this out?

[yocontra]

@jannisg What's the bug? I resize the viewport and the header shows up/disappears as intended in the code.

[jannisg]

@contra Thanks for even looking at this :)

The issue is that the contained form (the child being passed into the <MediaQuery> is unmounting/mounting as I resize and hit the breakpoints which cause the form values (if you enter one, then resize) to be lost.

I cannot figure out how to make the instance of <MyForm /> that is the child of <LayoutManager> in the index.js "persist" when wrapped with the MediaQuery which causes the unmount/mount cycle of MyForm.

For what it's worth, I don't see this as a bug in this module. I just piggybacked on this closed thread as it's the same issue that @paulcredmond was trying to solve and my other StackOverflow research and experimentation in the CodeSandbox that I linked didn't yield any solutions.

---

Update: The only way I have been able to get this to work is by wrapping all individual children that should be conditionally shown/hidden in individual conditionals based on the isMatch flag: https://codesandbox.io/s/q8q72wn279

Still, it would be nice if there was a way to simply approach it from a "children" of the container perspective and return entire layouts with the children being injected in certain places as per my first non-working example.

[yocontra]

@jannisg I think your issue is that react is seeing the component at different depths in the virtual DOM and treating it as a fresh component. I'm not sure if there's anything you can do to fix that since it's react core behavior, and it seems like a fine design choice on their part. It's going to seem pretty bootleg but you could always display: isMatch ? undefined : 'none' on the nav + asides.

These should provide some more insight:

• https://leoasis.github.io/posts/2017/06/26/reparenting-a-component/
• Support for reparenting facebook/react#3965

[jannisg]

Many thanks @contra, really enjoyed reading those links on the topic. ❤️