Nested list using React

Question

I am trying to create nested lists in separate div's using different input data. I am having a problem printing a nested list: List 2 here. I printing the name attribute of object and then checking if there are any childNodes print the name attribute of those too, nested that is. Here's the Parent class.

export default class Parent extends Component {
  render() {
    return (

    <div>
      <h4>List 1</h4>
      <ul>
        {this.props.jsonData1.map(item => {
          return <Child name={item.name}/>
        })}
      </ul>
    </div>

    <div>
      <h4>List 2</h4>
      <ul>
        {this.props.jsonData2.map(item1 => {
          return <Child name={item1.name}/>
         if(item1.childNodes){
           <ul>
           {item1.jsonData2.map(item2=>{
             return <Child name={item2.name}/>
           })}
         }</ul>
        })}
      </ul>
    </div>
    );
  }
}

My Child class is pretty simple. It only returns a single list element.

export default class Child extends Component {
  render() {
    let {name}=this.props;
    return (
      <li>{name}</li>
    );
  }
}

I would appreciate some guidance about what I am doing wrong here. I am trying to keep the recursion as simple as possible but apparently I am doing it wrong.

Answer 1

You're almost there, but maybe this will guide you to the right track. Whenever we want to do something recursively, we want to know what our base case would be for us to not call the function again. So in my little example and using what you've got.

export default class Child extends Component {
  render() {
    let {name}=this.props;
    return (
      <li>{name}</li>
    );
  }
}

Our base case is if child.childNodes exist, then we want to create a new <ul> element list. However if it doesn't exist but the item exists, then we want to just render the <li>. this will keep going until there isn't anymore child nodes or items.

export default class Parent extends Component {
  renderChild = (child) => {
    if (child.childNodes) {
      return (
        <ul>
          {child.jsonData.map(item => {
            return this.renderChild(item);
          })}
        </ul>
      ); 
    }
    else if (child.name) {
     return <Child name={child.name}/>; 
    }
    return null;
   }

  render() {
    return (
    <div>
      <h4>Nested Lists</h4>
      <ul>
        {this.renderChild(this.props.jsonData)}
      </ul>
    </div>
  );
}

Answer 2

A few things just looking at the code. In the return for your Parent class, make sure you've encapsulating everything in one div:

export default class Parent extends Component {
   render() {
      return(
         <div>
           //other code
         </div>
      );
   }
}