title: How to compare objects of two different arrays in javascript
body: <p>I have a react application and in that I have the following list of objects.</p>
  <pre><code>const orderItems = [
    {
      id: 1,
      name: &quot;item 1&quot;,
      price: &quot;100&quot;,
      availableQty: 2,
      out: &quot;&quot;
    },
    {
      id: 2,
      name: &quot;item 2&quot;,
      price: &quot;100&quot;,
      availableQty: 2,
      out: &quot;&quot;
    },
    {
      id: 3,
      name: &quot;item 3&quot;,
      price: &quot;100&quot;,
      availableQty: 2,
      out: &quot;&quot;
    },
    {
      id: 4,
      name: &quot;item 4&quot;,
      price: &quot;100&quot;,
      availableQty: 2,
      out: &quot;&quot;
    }
  ];
  </code></pre>
  <p>Im mapping through the <code>orderItems</code> list and display the name with a <code>checkbox</code>. I have a state named <code>selectedItem</code> and when the checkbox is checked, new object adds to the <code>selectedItem</code> along with the <code>id</code> of the <code>orderItems</code> as shown in the following code.</p>
  <pre><code>const handleSelect = (e, item) =&gt; {
      const { checked } = e.target;
  
      const newObj = {
        id: item.id,
        isAdded: true,
        reason: &quot;&quot;,
        issue: &quot;&quot;,
        availableStock: &quot;&quot;
      };
  
      if (checked) {
        setselectedItem((previousState) =&gt; [...previousState, newObj]);
      }
      if (checked === false) {
        const filteredItems = selectedItem.filter(
          (singleItem) =&gt; singleItem.id !== item.id
        );
  
        setselectedItem(filteredItems);
      }
    };
  </code></pre>
  <p>In the react app, Im mapping the <code>orderItems</code> and showing the <code>name</code> with a checkbox. When the checkbox is checked, I add a new object to <code>selectedItem</code> with the <code>id</code> of <code>orderItems</code> and if the <code>selectedItem</code> is empty, I display a as &quot;list is empty&quot;. If checkbox is selected, I display a <code>input</code> tag under the <code>name</code> and if its not selected, i display a <code>label</code> with the text &quot;not selected&quot; as shown in the code below.</p>
  <pre><code>&lt;div className=&quot;app&quot;&gt;
        {items.map((item) =&gt; (
          &lt;div className=&quot;issue&quot;&gt;
            &lt;input type=&quot;checkbox&quot; onChange={(e) =&gt; handleSelect(e, item)} /&gt;
            &lt;label&gt;{item.name}&lt;/label&gt;
            {selectedItem.length &gt; 0 ? (
              &lt;&gt;
                {selectedItem.map((singleItem) =&gt;
                  singleItem.id === item.id ? (
                    &lt;input type=&quot;number&quot; /&gt;
                  ) : (
                    &lt;label&gt;not selected&lt;/label&gt;
                  )
                )}
              &lt;/&gt;
            ) : (
              &quot;list is empty&quot;
            )}
          &lt;/div&gt;
        ))}
      &lt;/div&gt;
  </code></pre>
  <p>The issue here is, when one item is <code>checked</code>, it show <code>input</code> tag under selected item and shows &quot;not selected&quot; label under other items but if i select two checkboxes,  both not selected label and input tag displays. If i select 3 checkboxes, not selected label displays two times with input tag.</p>
  <p>What i want is to display only the input tags under selected items and display not selected label under unchecked items.</p>
  <p>codesandbox link: <a href="https://codesandbox.io/s/minsaf-2jjt2g" rel="nofollow noreferrer">https://codesandbox.io/s/minsaf-2jjt2g</a></p>