title: Adding Table.Row fadeout transition
body: <p>I've built a simple add-your-todos system in React using Semantic-UI-React. It currently looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/h1u43.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/h1u43.gif" alt="before-transition-attempt"></a></p>
  
  <h2>Problem description, and my attempt</h2>
  
  <p>When the user clicks on the red bin icon, <strong>I'd like to delete the Table.Row using a Fadeout Transition</strong>. It currently deletes the row, but an animation here would make the user experience more enjoyable. <a href="https://react.semantic-ui.com/modules/transition#transition-example-transition-explorer" rel="nofollow noreferrer">I've visited the docs and tried to implement the solution</a>, using a Transition.Group component.</p>
  
  <h2>...but it didn't work well</h2>
  
  <p>After trying to solve this problem on my own, I got some unexpected behaviours. First of all, rows don't fadeout. Furthermore, all Table.Cell kind of "blend" into one single cell, which is annoying. See the (gruesome) result:</p>
  
  <p><a href="https://i.stack.imgur.com/B8LZ7.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/B8LZ7.gif" alt="after-transition-attempt"></a></p>
  
  <h2>The Todo component (before)</h2>
  
  <p>Each Todo row is being dynamically added on the Table using a Todo component, which, before implementing Transition.Group, looked like this:</p>
  
  <pre><code>const React = require('react');
  const moment = require('moment');
  import { Table, Checkbox, Icon, Popup, Grid, Button } from 'semantic-ui-react';
  
  class Todo extends React.Component {
      constructor(props) {
          super(props);
      }
  
      render() {
          const { id, text, completed, createdAt, completedAt } = this.props;
          const renderDate = (date) =&gt; {
              const timestamp = date;
              if (timestamp)
                  return `${moment.unix(timestamp).format('MMM Do YYYY @ h:mm a')}`;
              return '';
          }
  
          const renderPopup = () =&gt; {
              if (completedAt) {
                  return (
                      &lt;Popup  trigger={&lt;Icon name="calendar check" size="large"/&gt;} header={'Completed at'} content={renderDate(completedAt)}/&gt;
                  );
              } else {
                  return (
                      ''
                  );
              }
          }
  
          return (
              &lt;Table.Row&gt;
                  &lt;Table.Cell&gt;
                      &lt;Grid columns="equal"&gt;
                          &lt;Grid.Column width={3}&gt;
                              &lt;Checkbox toggle
                              defaultChecked={completed}
                              onClick={() =&gt; this.props.onToggle(id)} /&gt;
                          &lt;/Grid.Column&gt;
                          &lt;Grid.Column textAlign="left"&gt;
                              {renderPopup()}
                          &lt;/Grid.Column&gt;
                      &lt;/Grid&gt;
                  &lt;/Table.Cell&gt;
                  &lt;Table.Cell&gt;{text}&lt;/Table.Cell&gt;
                  &lt;Table.Cell&gt;{renderDate(createdAt)}&lt;/Table.Cell&gt;
                  &lt;Table.Cell textAlign="right"&gt;
                      &lt;Button basic color="red" icon="trash"
                              onClick={() =&gt; {
                                  this.props.onRemoveTodo(id);
                                  this.handleFadeoutItem();
                                  }}/&gt;
                  &lt;/Table.Cell&gt;
              &lt;/Table.Row&gt;
          );
      }
  }
  
  module.exports = Todo;
  </code></pre>
  
  <h2>The  component (after)</h2>
  
  <p>This is how it looks now (which is obviously wrong!):</p>
  
  <pre><code>const React = require('react');
  const moment = require('moment');
  import { Table, Checkbox, Icon, Popup, Grid, Button, Transition } from 'semantic-ui-react';
  
  class Todo extends React.Component {
      constructor(props) {
          super(props);
  
          this.state = {
              visible: true
          };
  
          this.handleFadeoutItem = this.handleFadeoutItem.bind(this);
      }
  
      handleFadeoutItem () {
          this.setState({
              visible: false
          });
      }
  
      render() {
          const { visible } = this.state;
          const { id, text, completed, createdAt, completedAt } = this.props;
          const renderDate = (date) =&gt; {
              const timestamp = date;
              if (timestamp)
                  return `${moment.unix(timestamp).format('MMM Do YYYY @ h:mm a')}`;
              return '';
          }
  
          const renderPopup = () =&gt; {
              if (completedAt) {
                  return (
                      &lt;Popup  trigger={&lt;Icon name="calendar check" size="large"/&gt;} header={'Completed at'} content={renderDate(completedAt)}/&gt;
                  );
              } else {
                  return (
                      ''
                  );
              }
          }
  
          return (
              &lt;Transition.Group as={Table.Row} visible={visible} animation="fade" duration={500}&gt;
                  &lt;Table.Row&gt;
                      &lt;Table.Cell&gt;
                          &lt;Grid columns="equal"&gt;
                              &lt;Grid.Column width={3}&gt;
                                  &lt;Checkbox toggle
                                  defaultChecked={completed}
                                  onClick={() =&gt; this.props.onToggle(id)} /&gt;
                              &lt;/Grid.Column&gt;
                              &lt;Grid.Column textAlign="left"&gt;
                                  {renderPopup()}
                              &lt;/Grid.Column&gt;
                          &lt;/Grid&gt;
                      &lt;/Table.Cell&gt;
                      &lt;Table.Cell&gt;{text}&lt;/Table.Cell&gt;
                      &lt;Table.Cell&gt;{renderDate(createdAt)}&lt;/Table.Cell&gt;
                      &lt;Table.Cell textAlign="right"&gt;
                          &lt;Button basic color="red" icon="trash"
                                  onClick={() =&gt; {
                                      this.props.onRemoveTodo(id);
                                      this.handleFadeoutItem();
                                      }}/&gt;
                      &lt;/Table.Cell&gt;
                  &lt;/Table.Row&gt;
              &lt;/Transition.Group&gt;
          );
      }
  }
  
  module.exports = Todo;
  </code></pre>
  
  <p>Any help offered will be greatly appreciated!</p>
  
  <hr>
  
  <p><strong>EDIT</strong></p>
  
  <p>@Adrien's answer partially solved my problem. Now every cell is in its place, but the animation transition doesn't seem to play. Furthermore, the calendar icon next to my "completed" checkboxes (check the initial, unmodified version of the app) seem to disappear. Any idea why these two things happen? See:</p>
  
  <p><a href="https://i.stack.imgur.com/ajaOa.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ajaOa.gif" alt="still-not-quite-right"></a></p>