React-media seems to nest the component within itself

[Casey Trombley]

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.