Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript Installing and Using ReactCSSTransitionGroup

benjaminmosery
benjaminmosery
6,346 Points

Console error: Warning: Unknown props `onExited`, `appear`, `enter`, `exit` on <li> tag.

I encountered the following error when I attempted to import the TransitionGroup component into the application:

Warning: Unknown props `onExited`, `appear`, `enter`, `exit` on <li> tag. Remove these props from the element. 
 in li (created by GuestList)
    in ul (created by TransitionGroup)
    in TransitionGroup (created by GuestList)
    in div (created by GuestList)
    in GuestList

My import statements are as follows:

import React, { Component } from 'react';
import { render } from 'react-dom';
import {CSSTransition, TransitionGroup } from 'react-transition-group';

My return() statement in App.js is as follows:

    return (
      <div className="guest-list">
        <h1>Guest List</h1>
        <input type="text" placeholder="Invite Someone" value={this.state.newName} onKeyDown={this.handleChange.bind(this)} />
        <TransitionGroup component ="ul">

          {guests}

        </TransitionGroup>
      </div>
    );
  }
}

Any solutions to this problem? As indicated in https://teamtreehouse.com/community/shouldnt-it-be-updated-to-reacttransitiongroup , I updated my imports to react-transition-group instead of react-css-transition- group as stated in these videos.

However, the error still persists. Any help would be appreciated.

Ben

1 Answer

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher

Hi benjaminmosery,

The issue is happening because the <CSSTransitionGroup> component was removed in version 2. A <CSSTransition> component was added for use with the new <TransitionGroup> component to accomplish the same tasks. This workshop will need to be refreshed. In the meantime, I added updated notes and project files to each video.

Hope this helps. :)