title: Render recursively a nested data in React , I would like to recover the "name" of this file json
body: <p>how would i make a list of "name" from this list json in  <li> I tried this code but I only get the first "name" json file </p>
  
  <pre><code>[
      {
          "id": "LIB1",
          "name": "Library 1",
          "context": "C1",
          "children": [
              {
                  "id": "SKI1",
                  "name": "SKill 1",
                  "context": "C1",
                  "children": [
                      {
                          "id": "SKI11",
                          "name": "SKill 11",
                          "context": "C1"
                      },
                      {
                          "id": "SKI12",
                          "name": "SKill 12",
                          "context": "C1",
                          "children": []
                      },
                      {
                          "id": "SKI13",
                          "name": "SKill 13",
                          "context": "C1",
                          "children": [
                              {
                                  "id": "SKI131",
                                  "name": "SKill 131",
                                  "context": "C1",
                                  "children": [
                                      {
                                          "id": "SKI1311",
                                          "name": "SKill 1311",
                                          "context": "C1",
                                          "children": [
                                              {
                                                  "id": "SKI13111",
                                                  "name": "SKill 13111",
                                                  "context": "C1"
                                              }
                                          ]
                                      }
                                  ]
                              }
                          ]
                      }
                  ]
              },
              {
                  "id": "SKI2",
                  "name": "SKill 2",
                  "context": "C1",
                  "children": [
                      {
                          "id": "SKI21",
                          "name": "SKill 21",
                          "context": "C1",
                          "children": [
                              null
                          ]
                      },
                      {
                          "id": "SKI22",
                          "name": "SKill 22",
                          "context": "C1"
                      }
                  ]
              }
          ]
      }
  ]
  </code></pre>
  
  <p>I tried this code but I only get the first "name"</p>
  
  <pre><code>const PostData =({data})=&gt;{
     return(
         &lt;div&gt;
             &lt;ul&gt;
                 {data.map(item =&gt; {
                     return &lt;div&gt;
                     &lt;li&gt;
                     {item.name}
                     {item.children.name &amp;&amp; &lt;PostData data={item.children.name}/&gt;}
                     &lt;/li&gt;
  
                     &lt;/div&gt;
  
                 })}
  
             &lt;/ul&gt;
         &lt;/div&gt;
     )
  }
  
  const DATA = require('./data.json')
  
  
  function App() {
   return (
     &lt;div className="App"&gt;
         &lt;PostData data={DATA}/&gt;
     &lt;/div&gt;
   );
  }
  
  export default App;
  </code></pre>
  
  <p>I would like to recover the "name" of this file json thanks
  Please help me</p>
  
  <p>I tried this code but I only get the first "name"</p>
  
  <p>thanks for your help</p>