Map array of objects to create nested ul depending on property

I would like to arrange this data on a ul structure, nesting according to their Rank

const staff = [
  {
    Rank: 1,
    ID: '1',
    Role: 'Managing Director',
    Name: 'Peter'
  },
  {
    Rank: 2,
    ID: '2',
    Role: 'Operations Director',
    Name: 'Jane'
  },
  {
    Rank: 2,
    ID: '3',
    EmployeeImage: '',
    Role: 'Head of Client Services',
    Name: 'John',
  },
  {
    Rank: 3,
    ID: '4',
    EmployeeImage: '',
    Role: 'Senior Developer',
    Name: 'Tom',
  }
]

Desired output

<ul>
  <li>
    <div>Managing Director</div>
    <ul>
      <li>
        <div>Operations Director</div>
        <div>Head of Client Services</div>
        <ul>
          <li>
            <div>Senior Developer</div>
          </li>
        </ul>       
      </li>
    </ul>
  </li> 
</ul> 

Link to react codesandbox

I am trying to do lots of conditions with JSX but I am not getting anywhere and it’s getting quite messy, is this approach in the right direction or are there better ways to achieve this?

Thanks.

5 thoughts on “Map array of objects to create nested ul depending on property”