How do I use CSSTransitionGroup on children columns immediately under a row?

Question

I'm using Bootstrap's grid system in my ReactJS project. Under a row, I have multiple columns (col-md-4) which I want to animate as they are added to or removed from the row as the component state changes. But Using CSSTransitionGroup immediately under a row to let the columns render as children leaves a span under the row and above the columns ruining the columns' left float.

<div className="row">
    <ReactCSSTransitionGroup
        transitionName={`fadeIn`}
        transitionEnterTimeout={200}
        transitionLeaveTimeout={200}>

           {list.map(user => { return (
               <div className="col-sm-6 col-md-8 col-lg-4" key={user.id}>
                   <div class="card">

                   </div>
               </div>
            )})}
     </ReactCSSTransitionGroup>
</div>

YIELDS:

<div class="row">
    <span>
        <div className="col-sm-6 col-md-8 col-lg-4" key={user.id}>
            <div class="card">
                ...
            </div>
        </div>
    </span>
</div>

What is the correct approach to this?

I'm facing Same problem :( – Sabir Hussain Sep 07 '18 at 13:21 — Sabir Hussain, Sep 07 '18 at 13:21

score 0 · Accepted Answer · answered Sep 07 '18 at 13:36

Solved : just add className="row" in CSSTransitionGroup element

Sample code Here:

<CSSTransitionGroup
    transitionName="item"
    transitionEnterTimeout={500}
    transitionLeaveTimeout={300}
    className="row">

      {myIndustries}

</CSSTransitionGroup>

How do I use CSSTransitionGroup on children columns immediately under a row?

1 Answers1