Iterate JavaScript Object Array Elements

I am iterating JavaScript array elements using a for loop inside a function. Below is my array.

productArray = [
        {
            icon: faBox,
            name: 'CHANNELS',
            link: '/channelList/${channelListId}',
        },
        {
            icon: faVideo,
            name: 'VOD',
            link: '/vodList/${vodId}',
        },
        {
            icon: faMusic,
            name: 'MOD',
            link: null,
        },
]

Following function is being used to iterate the array elements.

showProductElements = () => {
        for (var i = 0; i < this.productArray.length; i++) {
            return (
                
                    

                        

                            

                                
                                                                         className="blocks-fa-icon" />
                                
                                
{this.productArray[i].name}
                            
                        
                    
                
            );
        }
    };

In render method I am calling the function as follows.

  {this.showProductElements()}
 

My problem is using all these fuctions and code snippests, I can only render the first object element of the array. Can anyone help me out this for solving this problem?