CODEWITHSUNDEEP
javascriptarraysreactjsforeachrendering
Morgoth
Morgoth

Reputation: 445

How to push generated elements into array and render them in React

In React application I need to generate HTML code for all elements in an array and render them.

Explanation:

providers: data provided by API,

PluginsProviderData: HTML element generated by another component,

moduleData: returns 5 objects. I need to generate "PluginsProviderData" element for each object. 

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

render() {

    const { providers } = this.props;

    let configurationList = this._getConfigurationList();

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

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.

Thanks in advance !

Upvotes: 1

Views: 2644

Answers (1)

Val&#233;ry
Val&#233;ry

Reputation: 4714

moduleData.map instead of moduleData.forEach?

Upvotes: 1

Related Questions