React Animating mount and unmount

JavaScript
1

I’m creating the recipe box in the data visualization certificate so I’m struggling with animating the mount and unmount of the Modal that I have created using a Portal. Here is my code: https://codepen.io/manAbl/pen/eKYVpL?editors=0011 . For some reason now when I try to open my modal says: Error on span CSSTransitionGroup component You can try to add a recipe and check the console and see what I’m talking about.

What I want to achieve is the slideDown animation when the component appears and slideUp when disappear or gets unmounted. Any help will be highly appreciated :slight_smile:

2

If you open up the developer tools and look at the console you have some more errors:

 Error: Element ref was specified as a string (.0) but no owner was set. You may have multiple copies of React loaded.

I’m not entirely sure why this error is coming up. It may be something to do with https://cdnjs.cloudflare.com/ajax/libs/react-transition-group/2.3.1/react-transition-group.js. React.,addons has been deprecated. Looks like you have a few different imports for react. I think something may be clashing.

When doing larger react apps like the recipe box I find using a proper code editor and creating a project with create-react-app helps with managing external libraries. https://github.com/facebook/create-react-app This will be a learning curve at the start but its very much worth it.

Hope this helps get to the bottom of it.

3

Yeah I know how to set up an environment, but I didn’t want to waste a bunch of time just downloading everything ( and them my laptop runs really slow when I start a dev server) - when I can simply adjust some stuff at codepen and ready to go … I’ll check other libraries that maybe help me achieve what I’m looking for. Thanks anyway