question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Not working on react 16

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
AaronCCWongcommented, Jan 10, 2018

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.

0reactions
pablonm3commented, Jan 10, 2018

Got it!, thanks for the support!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Not able to use React 16 library in react 17 - Stack Overflow
I am not using any useState in accessing page. I have checked related questions, still haven't found any working solution.
Read more >
Error Handling in React 16 – React Blog
As React 16 release is getting closer, we would like to announce a few changes to how React handles JavaScript errors inside components....
Read more >
react-dnd Module Not Found after upgrading from React 16 to ...
I recently upgraded my React project from 16.11 to 17. I'm getting the following error... any help or advice is appreciated: Description ...
Read more >
Issues and side effects with Reactive Web and Mobile apps on ...
If you're running Platform Server 11.10.0, you can use Runtime using React 16 Technical Preview to anticipate possible breaking changes in ...
Read more >
Troubleshooting | React Navigation
Sometimes it might even be due to a corrupt installation. If clearing cache didn't work, try deleting your node_modules folder and run npm...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found