ReactCSSTransitionGroup in child component not working - reactjs

Question

I am trying to map over state and add a transition to each element so that the elements appear on mounting the dom.
There are two components relevant to this: PricingPage and PricingCard.
The code for PricingPage is below:
import React, {Component} from 'react';
import PricingCard from './PricingCard';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
class PricingPage extends Component {
constructor(props) {
super(props);
this.state={
pricingContent:[{title:'1Abstract Art Pricing', text:`Each piece of artwork is individually priced. I base this on how much work and effort I put into the picture, basically I'm just using my own criteria.`},{title:'2Abstract Art Pricing', text:`Each piece of artwork is individually priced. I base this on how much work and effort I put into the picture, basically I'm just using my own criteria.`},{title:'3Abstract Art Pricing', text:`Each piece of artwork is individually priced. I base this on how much work and effort I put into the picture, basically I'm just using my own criteria.`},{title:'4Abstract Art Pricing', text:`Each piece of artwork is individually priced. I base this on how much work and effort I put into the picture, basically I'm just using my own criteria.`},{title:'5Abstract Art Pricing', text:`Each piece of artwork is individually priced. I base this on how much work and effort I put into the picture, basically I'm just using my own criteria.`},{title:'6Abstract Art Pricing', text:`Each piece of artwork is individually priced. I base this on how much work and effort I put into the picture, basically I'm just using my own criteria.`}]
}
}
render () {
return (
<div className='pricing-page-wrapper'>
<div className='navbar-background'></div>
<h1 className='pricing-title'>Pricing</h1>
<ReactCSSTransitionGroup transitionName="pricing" transitionEnterTimeout={700} transitionLeaveTimeout={700}>
<div className='pricing-wrapper'>
{this.state.pricingContent.map((item,i) => {
return(
<PricingCard key={item.title} title={item.title} text={item.text} />
)
})}
</div>
</ReactCSSTransitionGroup>
</div>
)
}
}
export default PricingPage;
.pricing-page-wrapper{
min-height: 75vh;
width:80%;
margin: 0 auto;
.pricing-title{
color:#949494;
}
.pricing-wrapper{
opacity:1;
}
.pricing-enter {
height: 0px;
opacity: 0;
}
.pricing-enter.pricing-enter-active {
height: 90px;
opacity: 1;
transition: 700ms;
}
.pricing-leave {
opacity: 1;
height: 90px;
}
.pricing-leave.pricing-leave-active {
opacity: 0;
height: 0;
transition: 700ms;
}
}
PricingCard page:
import React, {Component} from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
class PricingCard extends Component {
constructor(props){
super(props);
}
render () {
return (
<div className='pricing-card'>
<h3 className='pricing-card-title'>{this.props.title}</h3>
<div className='pricing-card-text'>{this.props.text}</div>
</div>
)
}
}
export default PricingCard;
.pricing-card{
border-radius: 15px;
border: 1px solid #949494;
padding: 20px;
height:90px;
margin: 10px 0 10px 0;
.pricing-card-title{
color:#949494;
}
.pricing-card-text{
color:#949494;
}
}
I cant seem to figure out what I'm doing wrong, any help would be appreciated.

Answer 1

You must use some unique key for an item in list, it's array index won't work. You can use item.title for example.
You must wrap all the elements group into single ReactCSSTransitionGroup, not every individual element.
ReactCSSTransitionGroup will track them by their keys, so it must be mounted and have all that unique keys for group elements. So take it out of PricingCard.render to PricingPage.render.
class PricingPage extends Component {
render () {
return (
<div className='pricing-page-wrapper'>
<div className='navbar-background'></div>
<h1 className='pricing-title'>Pricing</h1>
<ReactCSSTransitionGroup transitionName="pricing"
transitionEnterTimeout={700} transitionLeaveTimeout={700}>
{this.state.pricingContent.map((item,i) => {
return(
<PricingCard key={item.title}
title={item.title} text={item.text} />
)
})}
</ReactCSSTransitionGroup>
</div>
)
}
}

Answer 2

So i added transitionAppear={true} and used the following css selectors in my scss file:
.pricing-appear {
opacity: 0.01;
}
.pricing-appear.pricing-appear-active {
opacity: 1;
transition: opacity .5s ease-in;
}
The issue was that i wanted to animate on initial mounting of the components.