title: React - fade in on add, fade out on remove item
body: <p>Hello fellow react developers!</p>
  
  <p>I am trying to make a list of items, with two basic operations: add item and remove item.</p>
  
  <p>What I want to do is whenever I add an item, I want it to have a nice fade in effect (newly added item fades in), and when I remove it, I want it to fade-out (the removed item fades out).</p>
  
  <p>What would be the simplest or most straightforward way of achieving this effect on the given implementation (or if the implementation needs to be adjusted to do it, that works as well :))?</p>
  
  <pre><code>function App() {
    const [items, setItems] = useState([]);
  
    return (
      &lt;div&gt;
        &lt;button 
         className='button-add' 
          onClick={() =&gt; setItems([...items, {
              id: new Date().getUTCMilliseconds().toString()}])}
        &gt;
          Add item
        &lt;/button&gt;
        {items.map(item =&gt; (
          &lt;div className='item'&gt;
            &lt;span className='item-name'&gt;{item.id}&lt;/span&gt;
          &lt;button className='button-remove' onClick={() =&gt; setItems(items.filter((itemInner) =&gt; itemInner.id !== item.id))}&gt;Remove item&lt;/button&gt;
          &lt;/div&gt;
        ))}
      &lt;/div&gt;
    )
  }
  </code></pre>
  
  <p><a href="https://codepen.io/idjuka/pen/wvKYvZe" rel="nofollow noreferrer">Working example (add/remove) on codepen</a></p>