Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Installing and Using ReactCSSTransitionGroup

benjaminmosery
benjaminmosery
6,346 Points
Posted by 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
Guil Hernandez
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. :)