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

возвращение заявление в для цикла вызывает цикл ломаться.

Используйте следующие

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; 
}; 

возвращают массив ссылок