Reactjs Warning: Unknown props `onExited`, `appear`, `enter`, `exit` on
tag

Question

I'm following Wes Bos's Reactjs video. In his 22nd video, he is teaching how to use CSSTransitionGroup to do animation.

I found it's deprecated so I installed the latest lib:

react-transition-group

.

I found the CSSTransitionGroup is deprecated so I installed the new react-transition-group and I found that the replacement: TransitionGroup for CSSTransitionGroup.

Here is his code:

              <CSSTransitionGroup
                  className="order"
                  component="ul"
                  transtionName="order"
                  transitionEnterTimeout={500}
                  transitionLeaveTimeout={500}
                  >
                  {orderIds.map(this.renderOrder)}
                  <li className="total">
                      <strong>Total:</strong>{formatPrice(total)}
                  </li>
              </CSSTransitionGroup>

Here is my code with the new lib:

     <TransitionGroup
                className="order"
                component="ul">
            {/* <ul className="order"> */}
                {orderIds.map(this.renderOrder)}
                <li className="total">
                    <strong>Total:</strong>{formatPrice(total)}
                </li>
                {/* </ul> */}
             </TransitionGroup>

The UI still renders but it throws me an error and order is not removed after I click the X button. Here is the Error messge:

    Warning: Unknown props `onExited`, `appear`, `enter`, `exit` on <li> tag. Remove these props from the element. For details, see https://facebook.github.io/react/warnings/unknown-prop.html
    in li (at Order.js:24)
    in ul (created by TransitionGroup)
    in TransitionGroup (at Order.js:56)
    in div (at Order.js:53)
    in Order (at App.js:106)
    in div (at App.js:95)
    in App (created by Route)
    in Route (at index.js:20)
    in div (at index.js:18)
    in Router (created by BrowserRouter)
    in BrowserRouter (at index.js:17)
    in Root (at index.js:28)

and here is the code for line 24 in Order.js:

   if (unAvailable) {
            return (
                <li key={key}>Sorry, {fish ? fish.name : 'fish'} is no londer available~! {removeButton}</li>
            );
        }

Have you considered using Facebook's own [ReactCSSTransitionGroup](https://facebook.github.io/react/docs/animation.html)? — canaan seaton, Aug 06 '17 at 15:10
@canaanseaton wow, I didn't know it. As long as it works and not deprecated, I'm happy to learn and use it~! — Franva, Aug 06 '17 at 15:12
I have the same problem. Can you please share your solution is it's fixed? — Negin Basiri, Aug 21 '17 at 00:14
@NeginBasiri up until now, I only received an email from the author asking whether this issue has been solved or not. I replied and there is no further reply..... let me know if you found the solution. thanks — Franva, Aug 22 '17 at 04:46
I received a reply that "Transition component needs to be the direct children of the Transition group." That resolved the warning... But still I don't get fade animation when rows are adding/removing — Negin Basiri, Aug 22 '17 at 23:01
so, are you using the latest version of TransitionGroup or the older version which was used when the tutorial video was recorded. — Franva, Aug 23 '17 at 00:29

score 3 · Answer 1 · answered Dec 25 '19 at 22:57

@Franva, I fixed the issue. This error is cause due to the renderOrder component is not the direct children of the Transition group. You will have to declare total as a variable and use it outside TransitionGroup. The below code is not executable due to enormous dependency and setup, but hopefully will help you understand.

 const totalEl = (
      <ul className="order">
        <li className="total">
          <strong>Total:</strong>
          {formatPrice(total)}
        </li>
      </ul>
    );

    return (
      <div className="order-wrap">
        <h2>Order</h2>

        <TransitionGroup className="order" component="ul">
          {orderIds.map(this.renderOrder)}
        </TransitionGroup>

        {totalEl}
      </div>
    );

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Reactjs Warning: Unknown props `onExited`, `appear`, `enter`, `exit` on tag

1 Answers1

Reactjs Warning: Unknown props `onExited`, `appear`, `enter`, `exit` on
tag