React Component期待どおりに機能していません

Question

以下のコードで何が問題になっていますか？常に1を記録します。小道具で数字を受け取り、何度もループしてリンクのリストを返すだけです。

import React from 'react'; 

const itemWidget = (props) => { 

    let numItems = props.numItems; 
    let itemList = itemMarkup(numItems); 

    return (
    <div> 

    { itemList } 

    </div>); 
}; 

export default itemWidget; 

const itemMarkup = (n) => { 

    for (let i=1; i <= n ; i++) { 
    console.log(i); 
    return (
     <a href="#">{i}</a> 
    ); 
    } 
} 

以下は、番号を渡す親コンポーネントのコードです。

import React from 'react'; 
import itemWidget from '~/Components/itemWidget'; 

export default class Merchandise extends React.Component { 
    constructor() { 
    super(); 
    } 

    render() { 
    return (
    <div> 
     <div className="merch-items"> 
     <ItemsWidget numItems={10}/> 
     </div> 
    </div> 
    ); 
    } 
} 

Answer 1

リターンループが破損する原因となっ forループで声明。

import React from 'react'; 
const itemWidget = (props) => { 

    let numItems = props.numItems; 
    let itemList = itemMarkup(numItems); 

    return (
    <div> 

    { itemList } 

    </div>); 
}; 
const itemMarkup = (n) => { 
    let itemList = []; 
    for (let i=1; i <= n ; i++) { 
    itemList.push (
     <a href="#">{i}</a> 
    ); 
    } 

    return itemList 
} 

Answer 2

const itemMarkup = (n) => { 
    let rows = [] 
    for (let i=1; i <= n ; i++) { 
     console.log(i); 
     rows.push(<a href="#">{i}</a>); 
    // return (
    // <a href="#">{i}</a> 
    //); 
    } 

    return rows; 
}; 

リターン