title: ReactJs - component nesting to display nested data working abruptly
body: <p>My data is:</p>
  
  <pre><code>[{
          "id": 1,
          "label": "List item 1",
          "parent_id": 0,
          "children": [{
                  "id": 5,
                  "label": "List item 1",
                  "parent_id": 1
              },
              {
                  "id": 6,
                  "label": "List item 1",
                  "parent_id": 1
              },
              {
                  "id": 7,
                  "label": "List item 1",
                  "parent_id": 1
              },
              {
                  "id": 8,
                  "label": "List item 1",
                  "parent_id": 1,
                  "children": [{
                          "id": 9,
                          "label": "List item 1",
                          "parent_id": 8
                      },
                      {
                          "id": 10,
                          "label": "List item 1",
                          "parent_id": 8
                      }
                  ]
              }
  
          ]
      },
      {
          "id": 2,
          "label": "List item 1",
          "parent_id": 0
      }
  ]
  
  </code></pre>
  
  <p>My App.js components looks like this:</p>
  
  <pre><code>import React, {useState} from 'react';
  import {apiData} from './data/api';
  import './App.css';
  import {NestedLists} from './components/NestedLists';
  
  const App = () =&gt; {
    return (
      &lt;div className="container"&gt;
         &lt;h3&gt;Calling a nested component&lt;/h3&gt;
         &lt;NestedLists filteredData = {data} /&gt;
        &lt;/div&gt;
    )
  }
  export default App;
  
  </code></pre>
  
  <p>NestedList component:</p>
  
  <pre><code>import React from 'react'
  
  export const NestedLists = ({filteredData}) =&gt; {
      return (
          &lt;ul&gt;
              {filteredData &amp;&amp; filteredData.map((m,i) =&gt; {
                  return (
                  &lt;li key={m.label}&gt;
                   {m.id}
                   {m.children &amp;&amp; &lt;NestedLists filteredData={m.children} /&gt;}
                  &lt;/li&gt;
          );
        })}
          &lt;/ul&gt;
      )
  }
  
  </code></pre>
  
  <p>When i check the results there is same nesting printed twice as shown in the below image which should not happen::
  Here inside 1: 5,6,7,8 is repeated twice and inside 8 : 9,10 is repeated twice which should not happen. what is missing here?</p>
  
  <p><a href="https://i.stack.imgur.com/5MfEe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5MfEe.png" alt="NestedListDiagram"></a></p>