Учитывая число, как отобразить несколько элементов html?

const ChartLegend = props => {

   const { iconName, label, noOfIcons = 2 } = props;

   const renderIcons = () => Array(noOfIcons)
            .fill(0)
            .map(e => (<Icon
                name = {iconName}
                type='solid'
            />));
    
  return (
    <Col> 
        {renderIcons()} 
        {label}
    </Col>
   );
};

export default ChartLegend;

используйте Array.map.

Вам нужно будет вернуть массив для отображения нескольких элементов. Итак, в вашей части else,

{
          const arr = [];
            for (let i = 0; i < noOfIcons; i++) {
                arr.push( <Icon
                    name = {iconName}
                    type='solid'
                />);
            }
         return arr;
        }

Что-то вроде этого может сработать.

Вы можете использовать метод карты массива для рендеринга нескольких значков.

Обычно, когда вы используете react для рендеринга нескольких компонентов одного типа, вы используете метод карты.

const ChartLegend = props => {

    const { iconName, label, noOfIcons = 2 } = props;

    const renderIcons = () => {

        if (!noOfIcons) {
            return <Icon
                name = {iconName}
                type='solid'
            />;
        }
        else {
            Array(noOfIcons)
                .fill(0)
                .map((v,i) =>{
                   return <Icon
                       key = {i}
                       name = {iconName}
                       type='solid'
                   />;
           })
        }
    };

    return (
        <Col> 
            {renderIcons()} 
            {label}
        </Col>
    );
};

export default ChartLegend;

Это будет более короткий и читаемый (на мой взгляд) способ сделать это:

    const renderIcons = () => {
        return(
           Array(noOfIcons? noOfIcons: 1)
               .fill(0)
               .map((v,i) =>{
                   return <Icon
                       key = {i}
                       name = {iconName}
                       type='solid'
                   />;
           })
        );
    };

Вам нужно использовать карту.

Замените это

for (let i = 0; i < noOfIcons; i++) {
                return <Icon
                    name = {iconName}
                    type='solid'
                />;
            }

с

return noOfIcons.map(()=> (<Icon name = {iconName} type='solid' />)

Вы можете создать массив элементов n и перебирать его, чтобы отображать элементы значков. Если noOfIcons равно 0, создайте массив из одного элемента:

<Col> 
    {[...Array(noOfIcons || 1)].map((_, index) => 
      (<Icon name = {iconName} type='solid' key = {`solid_icon_${index}`} />))} 
    {label}
</Col>