How to push generated elements into array and render them in React
<p>In React application I need to generate HTML code for all elements in an array and render them.</p>

<p><strong>Explanation:</strong> </p>

<p><strong>providers</strong>: data provided by API,</p>

<p><strong>PluginsProviderData</strong>: HTML element generated by another component,</p>

<p><strong>moduleData</strong>: returns 5 objects. I need to generate "PluginsProviderData" element for each object.  </p>

<pre><code>_getConfigurationList() {
    const { providers } = this.props;
    let providersConfigurationList = [];
    if (providers != undefined) {
        let moduleData = providers[3].modules;
        providersConfigurationList = moduleData.forEach(function(data) {
            return (
                &lt;PluginsProviderData key={data._id} title={data.name} headerId={"header" + data._id} manageId={"manage" + data._id}&gt;                        
                &lt;/PluginsProviderData&gt;
            );
        });
    }
    return providersConfigurationList;
    console.log(providersConfigurationList);
}

render() {

    const { providers } = this.props;

    let configurationList = this._getConfigurationList();

    return (
        &lt;div&gt;
            &lt;div class="row topSpace"&gt;
                &lt;div class="small-12 columns highLimiter"&gt;
                     {configurationList}
                &lt;/div&gt;
            &lt;/div&gt;
       &lt;/div&gt;
    );
}
</code></pre>

<p>Could someone show me the way how to deal with such a task? I've tried to create a variable which holds the moduleData.forEach part and .push it to providersConfigurationList array however the array was always empty. I'm not sure what mistake I've done.</p>

<p>Thanks in advance !  </p>