Iteration to recursive function

In my first iterative algorithm, I do this

for (auto &widget : controls.getWidgets())
{
    if (!widget->visible) continue;

    widget->draw();

    for (auto &widget_component : widget->components)
    {
        if (!widget_component->visible) continue;

        widget_component->draw();

        for (auto &ww : widget_component->components)
        {
            if (!ww->visible) continue;

            ww->draw();
        }
    }
}

Now, I see the flaw in this algorithm because of the repetition of code.

I try to write a recursive function call to handle this thing.

void swcApplication::recursiveDisplay(swcWidget *next)
{
    if (next == nullptr) return;

    if ((next->parent != nullptr) &&
        !next->parent->visible) return;

    if (next->visible)
        next->draw();

    for (auto &i : next->components)
    {
        recursiveDisplay(i);
    }
}

void display()
{
    for (auto &widget : controls.getWidgets())
    {
        recursiveDisplay(widget);
    }
}

Display first the parent before all other children, if parent is not visible, then don't draw its children

Is the above phrase satisfy by this algorithm (As far as I can see, it is)? Is this optimal? I don't know what drawbacks might occur here because I just write in a few seconds.

If you didn't find anything wrong here, now, how can I put it back in iterative way? I know iteration is better.

Update

I didn't use any z attribute here and instead I go for painter's algorithm.

The flaw I am referring in my iteration version is that, it is limited to draw widgets depends on how deep I will code for iteration.

You can modify the recursive code to use an explicit stack:

#include 

void display_widgets(control& controls)
{
    std::stack widgets;
    for(auto &widget : controls.getWidgets()) {
        widgets.push(widget);
    }

    while(!widgets.empty()) {
        widget* w = widgets.top();
        widgets.pop();
        if(!widget->visible) {
            continue;
        }
        widget->draw();
        for(auto& component : widget->components) {
            widgets.push(component);
        }
    }
}

I know iteration is better.

This is highly dependent on language and usage. It is "better" in that recursion can use O(n) stack space (although not always - tail call optimization gets rid of this limitation), and won't blow your stack. However, in this case, assuming the recursive algorithm actually did what you wanted, it would be better and easier.

You can always turn a recursive solution into an iterative one by replacing the call stack with an actual stack of your own, as above. For very deeply nested recursive calls, this may save you from stack overflows, however, it is more fiddly to code, and in this case, doesn't gain you anything.

Having written the code above, my advice would be to stick with the recursive solution.

StackExchange Code Review Q#41795, answer score: 4