title: How to remove specific item from JSON object correctly in REACT js?
body: <p>In REACT JS, I have a <strong>JSON object</strong> in state component "<strong>myrecords</strong>" where items are grouped by their <strong>Company</strong> Names and it has following format:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
          "Master Automotives": [
              {
                  "SparePartID": "43",
                  "Name": "Oil and Lubricants",
                  "Price": "4500",
                  "VendorID": "48",
                  "CompanyName": "Master Automotives",
                   "Qty": 1,
                   "TotalPrice": "4500"
  
              },
              {
                  "SparePartID": "45",
                  "Name": "Lights",
                  "Price": "2300",
                  "VendorID": "48",
                  "CompanyName": "Master Automotives",
                   "Qty": 1,
                   "TotalPrice": "2300"
              }
          ],
  
          "Repair Solutions": [
              {
                  "SparePartID": "47",
                  "Name": "Steering Wheel",
                  "Price": "1500",
                  "VendorID": "60",
                  "CompanyName": "Repair Solutions",
                   "Qty": 1,
                   "TotalPrice": "1500"
              }
          ],
          
  
           "FiveStar Automotives": [
              {
                  "SparePartID": "51",
                  "Name": "Brakes",
                  "Price": "234",
                  "VendorID": "70",
                  "CompanyName": "FiveStar Automotives",
                   "Qty": 1,
                   "TotalPrice": "234"
              },
              {
                  "SparePartID": "53",
                  "Name": "Clutch",
                  "Price": "999",
                  "VendorID": "70",
                  "CompanyName": "FiveStar Automotives",
                   "Qty": 1,
                   "TotalPrice": "999"
              },
                {
                  "SparePartID": "55",
                  "Name": "LED",
                  "Price": "288",
                  "VendorID": "70",
                  "CompanyName": "FiveStar Automotives",
                   "Qty": 1,
                   "TotalPrice": "288"
              }
          ]
      
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Im using this method to remove a specific item from <strong>myrecords</strong> state whenever delete button against an item is clicked:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>removeCartItem(CompanyName, sid,e)
  {
  
    const items = {...this.state.myrecords};
    const j = items[CompanyName].findIndex(item =&gt; item.SparePartID === sid);
  
    items[CompanyName].splice([j], 1);
  
    this.setState({
       myrecords: items
     });
     
     }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Im sending <strong>CompanyName</strong>, SparePartID as <strong>sid</strong> in parameters of function to perform delete. </p>
  
  <p><strong>It works Perfectly FINE and deletes the item on which I click.</strong> </p>
  
  <p>But <strong>problem</strong> is if a Company has only 1 item and I delete it, then still the <strong>myreocords</strong> JSON Object contains that Company with an empty array(no items). <strong>Instead I wanted it to delete such a Company who has no Items left in it.</strong></p>
  
  <p>SO that <strong>myrecords</strong> state should have only those <strong>Companies</strong> Data whose items are present. </p>
  
  <p>Please help me to solve this Problem.</p>