So I was using a `TreeSelect` for creating a cascading select for an object shaped like `country => state => city => neighborhood`.

E.g.:

```json
{
  "BR": {
    "PR": {
      "Curitiba": [
        "Bigorrilho",
        "Jardim Botânico"
      ]
    },
    "SP": {
      "São Paulo": [
        "Vila Mariana"
      ]
    }
  },
  "FR": {
    "Île-de-France": {
      "Arrondissement de Paris": [
        "---"
      ]
    }
  }
}
```

And I wanted to pass it to TreeSelect so that the values can be nested, each one being its `title`, giving each an unique `key`, and each one having an array `value`, in order to capture all parts.

So firstly it went like:

```javascript
// addressesKeys => json above

<TreeSelect
  treeData={Object.entries(addressesKeys).reduce(
    (countries, [country, countryStates]) => ([
      ...countries, {
      title: country,
      value: country,
      key: country,
      children: Object.entries(countryStates).reduce(
        (states, [state, stateCities]) => ([
          ...states, {
            title: state,
            value: [country, state],
            key: country + state,
            children: Object.entries(stateCities).reduce(
              (cities, [city, cityNeighborhoods]) => ([
                ...cities, {
                  title: city,
                  value: [country, state, city],
                  key: country + state + city,
                  children: cityNeighborhoods.map(
                    (neighborhood) => ({
                      title: neighborhood,
                      value: [country, state, city, neighborhood],
                      key: country + state + city + neighborhood,
                    }))
                }])
            , []),
          }])
      , []),
    }])
  , [])}
/>
```

The first thing that appears repeatly is the `{ title, value, key, children? }`. Let's make a function for that:

```javascript
function treeNode(value, children) {
  return {
    value,
    title: value[0],
    key: value.join('_'),
    children,
  };
}
```

Now we have:

```javascript
<TreeSelect
  treeData={Object.entries(addressesKeys).reduce(
    (countries, [country, countryStates]) => ([
      ...countries,
      treeNode([country], Object.entries(countryStates).reduce(
        (states, [state, stateCities]) => ([
          ...states,
          treeNode([state, country], Object.entries(stateCities).reduce(
              (cities, [city, cityNeighborhoods]) => ([
                ...cities,
                treeNode([city, state, country], cityNeighborhoods.map(
                  (neighborhood) => treeNode([neighborhood, city, state, country])
                ))
              ])
          , [])),
          ])
      , [])),
    ])
  , [])}
/>
```

Cool. But there are some repeated structure yet: `reduce` (for `Object.entries(obj)`) and `map` (for `array`, only last iteration). Let's make another function:

```javascript
function mapToTreeNode(items, oldValue = []) {
  // if item is an array
  if (Array.isArray(items)) return items.map(
    (item) => treeNode([
      item,
      ...oldValue,
    ])
  );
  // if item is an object
  return Object.entries(items).reduce(
    (oldItems, [item, children]) => ([
      ...oldItems,
      treeNode([
        item,
        ...oldValue,
      ], children),
    ])
  , []);
}
```

Also, we need to change the previous function for calling the last one:

```diff
function treeNode(value, children) {
  return {
    value,
    title: value[0],
    key: value.join('_'),
-    children,
+    children: children && mapToTreeNode(children, value),
  };
}
```

This way, we finally get:

```javascript
<TreeSelect treeData={mapToTreeNode(addressesKeys)} />
```

In order to test this, let's make an `onChange` function (use this in every step, because it will work):

```javascript
function handleChange(value) {
  let [country, state, city, neighborhood] = value;
  console.log({ country, state, city, neighborhood });
}
```

Pass it as a prop, change the component's value and check your console.

The full final code is:

```javascript
function mapToTreeNode(items, oldValue = []) {
  if (Array.isArray(items)) return items.map(
    (item) => treeNode([
      item,
      ...oldValue,
    ])
  );
  return Object.entries(items).reduce(
    (oldItems, [item, children]) => ([
      ...oldItems,
      treeNode([
        item,
        ...oldValue,
      ], children),
    ])
  , []);
}

function treeNode(value, children) {
  return {
    value,
    title: value[0],
    key: value.join('_'),
    children: children && mapToTreeNode(children, value),
  };
}

function handleChange(value) {
  let [country, state, city, neighborhood] = value.reverse();
  console.log({ country, state, city, neighborhood });
}

return (
  <TreeSelect
    treeData={mapToTreeNode(addressesKeys)}
    onChange={handleChange}
  />
);
```

With `mapToTreeNode` and `treeNode`, it is possible to nest as much objects as you want, with different depths (i.e. you don't need to know how deep it is in order to programatically call each one), if only the last value in the branch (considering object like a tree) is an array.