Not working on react 16

[pablonm3]

Hello, I'm trying a super simple example and, nothing is rendered in the screen, also no errors are logged in the console Here is the snippet, note that if I replace the "CardFlip" tag with a span, the element is rendered as expected:

...
import CardFlip from 'react-card-flip';
function Component(props){
return <CardFlip isFlipped={true}>
                    <div key="front">
                    <img
                            src="//img.buzzfeed.com/buzzfeed-static/static/2014-04/enhanced/webdr06/4/16/enhanced-11136-1396643149-13.jpg?no-auto"
                        />
                        <button>Click to flip</button>
                    </div>
                    <div key="back">
                    <img
                            src="//img.buzzfeed.com/buzzfeed-static/static/2014-04/enhanced/webdr06/4/16/enhanced-11136-1396643149-13.jpg?no-auto"
                        />
                        <button>Click to flip</button>
                    </div>
                </CardFlip>

}
...

I'm using react V16.2.0

[pablonm3]

I suspect it could be a css issue, since I heard this components uses absolute positioning

[AaronCCWong]

Is there a public repo I can look at? The example you provide works for me.

[pablonm3]

Please check the render method at: https://github.com/flashcardx/web/blob/card-flippable/src/components/flashcard.jsx If I replace your tag with a simple span then the content is displayed, I'm pretty sure this has to be with the absolute position of your component, is it posible to override this behaviour?

[AaronCCWong]

I copy and pasted your code into your footer and it works properly.

When I have your Flashcard component render just the CardFlip code I am seeing the CardFlip component. The img and button elements are what is not being rendered onto the page. After removing Radium, I was able to get them to render.

This is not react-card-flip. Something in Radium is conflicting with this package. I welcome a PR if you can figure out what the conflict is and whether it needs to be fixed in Radium or in react-card-flip.

[pablonm3]

Got it!, thanks for the support!