0

Below in my code. CSSTransition is not being recognized. It throws an error for some reason. I tried importing with and without braces, but it didn't seem to work.

import React, { Component } from 'react';
import styles from '../stylesheets/style.module.css';
import { CSSTransition } from 'react-transition-group';
class SlideShow extends Component {
  state = {
    backgroundColor: 'white',
    changePic: true,
    slideIndex: 1,
  };

  render() {
    return (
      <div className={styles.slideshowContainer}>
        <CSSTransition
          in={this.state.changePic}
          timeout={{
            enter: 2000,
            exit: 800,
          }}
          classNames="slidePics"
          unmountOnExit={true}
        ></CSSTransition>
      </div>
    );
  }
}

export default SlideShow;
Codebucks
  • 27
  • 6
  • what exactly error does it throw? – Alex Shchur Jul 17 '20 at 19:16
  • Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. - it says that . and when i remove CSSTransition, it works fine – Codebucks Jul 18 '20 at 06:26

1 Answers1

-1

Two things:

  1. Make sure to actually install react-transition-group
  2. Import without curly braces
Alex Shchur
  • 741
  • 4
  • 13
  • 1
    actually i am getting a new error, while using CSSTransition. Error: React.Children.only expected to receive a single React element child. – Codebucks Jul 18 '20 at 07:49
  • sounds like there should be something inside your . In your case it's empty as far as I can see – Alex Shchur Jul 18 '20 at 09:31