Given a number, how to render multiple html element?

Question

I would like to pass props noOfIcons to my ChartLegend component and if there is noOfIcons value then I would like to render the given number of icons. So if noOfIcons = 2 then render 2 <Icon/>. I've tried the following but it always renders only 1 <Icon/>, What am I missing? & if there is a simple way to handle this please suggest. Many thanks.

 <ChartLegend iconName={"square-full"} noOfIcons={2} label={'label'} />

const ChartLegend = props => {

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

    const renderIcons = () => {

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

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

export default ChartLegend;

Ron · Accepted Answer · 2020-12-10 13:22:43Z

1

You'll need to return an array to render multiple elements. So in your else part,

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

Something like this can work.

answered Dec 10, 2020 at 13:22

Ron

1172 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

lissettdm · Accepted Answer · 2020-12-10 16:43:41Z

1

You can create an array of n elements and iterate over it to render the icons elements. If noOfIcons is equal to 0 then create an array of one element:

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

edited Dec 10, 2020 at 16:43

answered Dec 10, 2020 at 16:34

lissettdm

13.2k1 gold badge25 silver badges43 bronze badges

Comments

Ran Marciano · Accepted Answer · 2020-12-10 13:40:36Z

You can use an array map method for rendering multiple icons.

Usually, when you use react to render multiple components of the same type you use the map method.

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;

This will be a shorter and more readable (in my opinion) way for doing so:

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

Alan Omar · Accepted Answer · 2020-12-10 13:37:06Z

0

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;

use Array.map.

edited Dec 10, 2020 at 13:37

answered Dec 10, 2020 at 13:22

Alan Omar

4,2971 gold badge13 silver badges26 bronze badges

Comments

Nilesh Patel · Accepted Answer · 2020-12-10 13:23:47Z

-1

You need to use map.

Replace this

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

with

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

answered Dec 10, 2020 at 13:23

Nilesh Patel

3,3079 silver badges13 bronze badges

Collectives™ on Stack Overflow

Given a number, how to render multiple html element?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related