CODEWITHSUNDEEP
reactjsreactcsstransitiongroup
yose93
yose93

Reputation: 55

Having trouble using React Transition Group first time

Good day! I wrote this code to test the React transition group library and eventually get stuck with the error. The script gets run and I see the data fill form on the page styled but when I click submit button form does not disappear. Error reference description: Failed prop type: The prop timeout is marked as required in CSSTransition, but its value is undefined. in CSSTransition (at app.jsx:24) in App (at index.js:7) However transitionAppearTimeot={1500}!

import React, { Component } from 'react';
import CSSTransitionGroup from 'react-transition-group/CSSTransition';
import './app.css';
import Form from './components/Form';
class App extends Component {
constructor() {
    super();
    this.state = {
        mounted: true,
    };
    this.handleSubmit = this.handleSubmit.bind(this);
};
handleSubmit(event) { 
    event.preventDefault();
    this.setState = {
        mounted: false
    }
    console.log(this.state);
};

render() {
    return (
        <div className="app">
            <CSSTransitionGroup
                transitionName="fade"
                transitionAppear={true}
                transitionAppearTimeout={1500}
                transitionEnter={false}
                transitionLeave={true}
                transitionLeaveTimeout={300}>
                {this.state.mounted && <Form onSubmit=
                {this.handleSubmit} />}
            </CSSTransitionGroup>
        </div>
    );
  }
}

export default App;

Upvotes: 1

Views: 3609

Answers (1)

trixn
trixn

Reputation: 16354

The error message is very specific. <CSSTransition> requires a prop timeout but you do not pass anything. Also your other props are not what <CSSTransition> expects.

I guess you are mixing up the old react-transition-group v1 with the new react-transition-group v2. You are using v2 which has a totally different API.

Upvotes: 5

Related Questions