title: Transitions for clicking and displaying content
body: <p>So, I've been trying to figure out some stuff with react and semantic-react-ui, I am new to react, so pardon the "oh you're doing it wrongs".</p>
  
  <p>Below are key components to my code, what I am trying to do, is when a user clicks on an item in the list, the related content to that list item will display to the right within the card. If the same element is clicked, it will default to the default description for the specific card.</p>
  
  <p><strong>HomePage.js</strong></p>
  
  <pre><code>import React, {Component} from 'react';
  import {keys} from 'lodash';
  import {Card, Container, Icon} from 'semantic-ui-react';
  import ChoreDetails from './ChoreDetails';
  
  class HomePage extends Component {
      constructor(props) {
          super(props);
      }
  
      renderChores = chores =&gt; (
          chores.map(chore =&gt; this.renderChore(chore))
      );
  
      renderChore = chore =&gt; {
          return (
              &lt;Card key={chore.name}&gt;
                  &lt;Card.Content&gt;
                      &lt;Card.Header&gt;
                          {chore.name}
                      &lt;/Card.Header&gt;
                      &lt;Card.Meta&gt;
                          {chore.assigned}
                      &lt;/Card.Meta&gt;
                      &lt;ChoreDetails chore={chore}/&gt;
                  &lt;/Card.Content&gt;
                  &lt;Card.Content extra&gt;
                      &lt;a&gt;
                          &lt;Icon name='tasks' /&gt;
                          { keys(chore.choreList).length } Chores
                      &lt;/a&gt;
                  &lt;/Card.Content&gt;
              &lt;/Card&gt;
          )
      };
  
      render() {
          const displayChores = this.renderChores(this.props.chores);
  
          return (
              &lt;Container&gt;
                  &lt;Card.Group doubling={true} stackable={true} itemsPerRow="2"&gt;
                      { displayChores }
                  &lt;/Card.Group&gt;
              &lt;/Container&gt;
          );
      }
  }
  
  export default HomePage;
  </code></pre>
  
  <p><strong>ChoreDetails.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import {Card, Container, Grid, List, Transition} from 'semantic-ui-react';
  
  class ChoreDetails extends Component {
  
      constructor(props) {
          super(props);
  
          this.state = {
              visible: true,
              animation: 'drop',
              defaultDescription: this.showDescription(props.chore, 'drop'),
              itemClicked: null,
              itemActive: null,
          };
      }
  
      renderChoreList = list =&gt; (
          list.map(item =&gt; &lt;List.Item as="a" key={item.name} onClick={this.showDetails.bind(null, item)} item={this.props.item}&gt;
              &lt;List.Icon name="tasks" /&gt;
              &lt;List.Content key={item.name} content={item.name} /&gt;
          &lt;/List.Item&gt;
      ));
  
      showDescription = (item, animation) =&gt; {
          return (
              &lt;Transition
                  transitionOnMount={true}
                  key={'default_description_' + item.name}
                  reactKey={'default_description_' + item.name}
                  visible={true}
                  animation={animation}
                  duration={300}
              &gt;
                  &lt;Container&gt;{item.description}&lt;/Container&gt;
              &lt;/Transition&gt;
          )
      };
  
      showDetails = (item) =&gt; {
          this.setState({
              itemClicked: item,
          });
      };
  
      getDescriptions = (choreGroup, itemClicked, animation) =&gt; (
          choreGroup.choreList.map((chore, index) =&gt; &lt;Transition
              key={choreGroup.name + '_' + index}
              reactKey={choreGroup.name + '_' + index}
              visible={(itemClicked.name === chore.name)}
              animation={animation}
              duration={300}
          &gt;
              &lt;Container&gt;{chore.description}&lt;/Container&gt;
          &lt;/Transition&gt;)
      );
  
      render() {
          const { itemClicked, defaultDescription, animation } = this.state;
          const displayChoreList = this.renderChoreList(this.props.chore.choreList);
          const descriptionContainers = (itemClicked) ? this.getDescriptions(this.props.chore, itemClicked, animation) : defaultDescription;
  
          if (itemClicked) {
              console.log(descriptionContainers);
          }
  
          return (
              &lt;Card.Description&gt;
                  &lt;Grid&gt;
                      &lt;Grid.Row&gt;
                          &lt;Grid.Column width={4}&gt;
                              &lt;List&gt;
                                  {displayChoreList}
                              &lt;/List&gt;
                          &lt;/Grid.Column&gt;
                          &lt;Grid.Column width={12}&gt;
                              &lt;Transition.Group&gt;
                              {descriptionContainers}
                              &lt;/Transition.Group&gt;
                          &lt;/Grid.Column&gt;
                      &lt;/Grid.Row&gt;
                  &lt;/Grid&gt;
              &lt;/Card.Description&gt;
          )
      }
  
  }
  
  ChoreDetails.defaultProps = {
      chore: []
  };
  
  export default ChoreDetails;
  </code></pre>
  
  <p>How can I get the proper order of elements to show, when clicked, so that the current active element fades, and then on completion of its transition, it triggers the incoming items transition in?</p>