I want my `RenderDOM` to render one component for each object found in an array. I'm building the render with JSX, and my code is as follows:

```
ReactDOM.render((
            <div className="container container-collapsed">
                <Actions Units={aUnits} />
                <div className="units-wrapper">
                    {
                        aUnits.forEach(u=> {
                            return <Unit unit={u} />
                        })
                    }
                </div>
            </div>
        ), document.getElementById("root"));

```

I expeted the output to be like this:

```
<div class="container container-collapsed">
    <div class="actions-panel_true"></div>
    <div class="units-wrapper">
        <div class="unit1"></div>
        <div class="unit2"></div>
        <div class="unit3"></div>
    </div>
</div>

```

And instead I'm getting:

```
<div class="container container-collapsed">
    <div class="actions-panel_true"></div>
    <div class="units-wrapper"><div>
</div>

```

I know that my foreach is working, I debbuged it. But it is not building one JSX per units as I expcted. How to I make this foreach loop return one component for each object in my array, back to the JSX i'm trying to render?