Recursively render a deep nested data in React

const side = {
  "children": [
    {
      "children": [
        {
          "id": "b123a",
          "name": "compo"
        },
        {
          "id": "5a523",
          "name": "orient"
        },
        {
          "id": "42e7e",
          "name": "build"
        }
      ],
      "id": "f9ca7",
      "name": "building"
    },
    {
      "children": [
        {
          "id": "dbd4",
          "name": "insula"
        },
        {
          "id": "ad8404",
          "name": "fenest"
        },
        {
          "id": "e3837",
          "name": "window"
        }
      ],
      "id": "af776",
      "name": "envelope"
    },
    {
      "children": [
        {
          "id": "ba515",
          "name": "heating"
        },
        {
          "id": "6618",
          "name": "cooling"
        },
        {
          "id": "4a0547b8f",
          "name": "water_heating_system"
        }
      ],
      "id": "3e967",
      "name": "systems"
    },
    {
      "id": "e7c6e",
      "name": "spatial"
    },
    {
      "id": "9f641",
      "name": "design"
    }
  ],
  "name": "root"
}

const SideMenu = ({data}) => {
  if(!data) {
      return null;
  }
  return (
    <ul>
      {
      Array.isArray(data)? data.map(item => {
        return (<li>
          {item.name}
          {item.children && <SideMenu data={item.children} />}
        </li>);
      }): <li>
          {data.name}
          {data.children && <SideMenu data={data.children} />}
        </li>
      }
    </ul>
  );
}

ReactDOM.render(<SideMenu data={side} />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"/>