title: Unexpected behavior when using the same component twice in React
body: <p>I have two objects <code>incs</code> and <code>exps</code> each has the properties: <code>desc</code>, <code>amount</code> and <code>id</code>. I would like to display the details of each object in a container as a list, and the two containers are side-by-side. I did it like this</p>
  
  <pre><code>const Details = props =&gt; {
    return (
      &lt;div className={styles.container}&gt;
        &lt;div className={styles.detailsItem}&gt;
          &lt;ul&gt;
            {props.balance.incs.map(inc =&gt; (
              &lt;DetailsItem item={inc} key={inc.id}/&gt;
            ))}
          &lt;/ul&gt;
        &lt;/div&gt;
  
        &lt;div className={styles.detailsItem}&gt;
          &lt;ul&gt;
            {props.balance.exps.map(exp =&gt; (
              &lt;DetailsItem item={exp} key={exp.id}/&gt;
            ))}
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }; 
  </code></pre>
  
  <p>where <code>DetailsItem.js</code> is given by</p>
  
  <pre><code>const DetailsItem = ({item}) =&gt; {
    return (
      &lt;li className={styles.listItem}&gt;
        &lt;div&gt;{item.desc}&lt;/div&gt;
        &lt;div&gt;{item.amount}&lt;/div&gt;
      &lt;/li&gt;
    )
  }
  </code></pre>
  
  <p>The <code>.scss</code> file is</p>
  
  <pre><code>.container {
    width: 80%;
    max-width: 800px;
    margin: 1rem auto;
    padding: 1rem 0;
    text-align: center;
    display: flex;
    justify-content: space-around;
    .detailsItem {
      width: 49%;
      background: #eee;
      box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.7);
      h2{
        text-transform: uppercase;
        letter-spacing: 2px;
      }
      .listItem {
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 2rem;
        padding: 0.5rem 0;
      }
      li:nth-child(even) {
        background: rgb(219, 217, 217);
      }
    }
  }
  </code></pre>
  
  <p>The objects <code>incs</code> and <code>exps</code> are filled via a form. But when I add an <code>incs</code> entry, the <code>exps</code> container grows by the same amount <code>incs</code> container grows, although if the number of entries in <code>exps</code> is 0 or less than the number of entries in <code>incs</code>, and vice versa. See attached image. This is not a desired result. Why is this happening, and how to make each container grows according to the size of their object only?</p>
  
  <p><a href="https://i.stack.imgur.com/12PPS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/12PPS.png" alt="enter image description here"></a></p>