Do a Recursively render a deep nested data in React

Question

hello the subject is already treated but I still do not find the true answer.

i'm new to react and I want to render a list of "name". I have used map function to loop through the object, but I I only have the first "name" (Library 1) and not others. Provide me the complete for-loop syntax to render the object. thanks

const side =[
  {
      "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"
                  }
              ]
          }
      ]
  }
]

// Rendu recursif de donnée json 


const MyComponent  = ({collection}) => {
  if(Array.isArray(collection)) {
      return <ul>
            {collection.map((data)=> {
                return (<ul>
                     <li>{data.name}</li>
                     <li><MyComponent collection={data.name}/></li>
                   </ul>)

            })
            }
      </ul>
  }
  return null;
}

class App extends React.Component {
 render() {
     return (
        <MyComponent collection={side}/>
     )
 }
}

thortsx · Accepted Answer · 2019-09-28 14:52:03Z

1

Try this for your example:

const MyComponent  = ({collection}) => (
    Array.isArray(collection) ? <ul>
        {collection.map((item, index) => (
            item && item.children && Array.isArray(item.children) ?
                (
                    <li key={index}>
                        {item.name}
                        {<MyComponent collection={item.children} />}
                    </li>
                ) : <li key={index}> {item && item.name} </li>
        ))}
    </ul> : null
)

class App extends React.Component {
   render() {
       return (
           <MyComponent collection={side} />
       )
   }
}

answered Sep 28, 2019 at 14:52

thortsx

2,2802 gold badges15 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user11953983 Over a year ago

JDN thanks for you code.. please can you explain it to me?

thortsx Over a year ago

- I check collection is Array ? (1), if false: return null, if true: use map to render list li. Then, I check item is define && item.children is define && item.children is Array ?, if false: return <li key={index}> {item && item.name} </li>, if true: return {item.name} and call again <MyComponent collection={item.children} /> // Back to step (1)

Collectives™ on Stack Overflow

Do a Recursively render a deep nested data in React

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related