Как вывести вложенные данные с помощью рекурсии в виде дерева используя React

не стал переписывать Ваш код, а просто дополнил.

import React, { Component } from "react";

// создаем компонент для каждого элемента, называем его по-дурацки (например, Lala)
const Lala = ({ data }) => {
  const { id, parentId, name, children } = data;

  return (
    <div>
      <b>Id: {id}</b>
      <span>name: {name}</span>

      // здесь рекурсивно его вызываем, если у элемента в children есть еще такие же элементы
      {
          children &&
          children.map((i, n) => <Lala data={i} key={n} />)
      }
    </div>
  );
};

class Dropdown extends Component {
  render() {
    let data = getData();

    function handleData(obj) {

      // возвращаем полученный массив компонентов
      return [...obj.map((i, n) => <Lala data={i} key={n} />)];
    }

    let showHTMLData = handleData(data);

    return <div className="dropdown hide">{showHTMLData}</div>;
  }
}

export default Dropdown;

function getData() {
  return [
    {
      id: 3,
      parentId: null,
      name: "name3",
      children: [
        {
          id: 3.1,
          parentId: 3,
          name: "name3.1"
        }
      ]
    },

    {
      id: 2,
      parentId: null,
      name: "name2"
    },

    {
      id: 1,
      parentId: null,
      name: "name1",
      children: [
        {
          id: 1.1,
          parentId: 1,
          name: "name1.1"
        }
      ]
    }
  ];
}

и еще. у Вас Ваш метод handleData принимает якобы аргумент obj, хотя на деле принимает массив. давайте сущностям правильные имена,чтобы не сбивать с толку. например, вместо obj назовите его как arr (array).