React-media seems to nest the component within itself
caseytrombley opened this issue · comments
When using this, the component that you render inside the media query seems to get nested inside of itself. This makes it useless for passing down a boolean.
Example:
<Media query="(max-width: 1023px)" render={() => <Chat recalculating={recalculating} />} />
<Media query="(min-width: 1024px)" render={() => ( <GridCol base={12} lg={4}> <Chat recalculating={recalculating} /> </GridCol> )} />
When I globally update the recalculating state from false to true, I see this in the React inspector in the browser:
At mobile size ( < 1023px ) -
<MediaQuery maxWidth={1023}> <Chat recalculating={true} > <Chat recalculating={false} >
At desktop size ( > 1024px ) -
<MediaQuery minWidth={1024}> <Chat recalculating={true} > <Chat recalculating={false} >
^ Only the first component gets the updated prop, the other does not and so the boolean never gets passed down correctly to the component.