Loop buttons in react.js

Question

I am new to react.js, I have a list of names to display as a button.

const test: React.FC<IProps> = () => {
const buttons1= () => {
    for(let i=0; i<good.length; i++){
            <TextButton
                label={good[i].name}
                onClick={}
            />
    }
};
return(
    <div>
       {buttons1()}
       <TextButton
           label={"test1"}
           onClick={}
        />
    </div>
)

}

This code is successfully compiled, but it the textbutton is not reflect in the page,

Thanks

use map for that instead of loop

Jerson
– Jerson

2021-07-20 03:23:21 +00:00
Commented Jul 20, 2021 at 3:23 — Jerson
– Jerson, Commented Jul 20, 2021 at 3:23

Jerson · Accepted Answer · 2021-07-20 03:28:01Z

1

You can use map, and here is the reference List and Keys

const test: React.FC<IProps> = () => {
    const buttons1 = () => {
        return good.maps((v,i) => {
            return (
                <TextButton
                    key={i}
                    label={v.name}
                    onClick={}
                />
            )
        })
    }

    return(
        <div>
        { buttons1() }
        <TextButton
            label={"test1"}
            onClick={}
         />
        </div>
    )
    
}

answered Jul 20, 2021 at 3:28

Jerson

1,7752 gold badges12 silver badges15 bronze badges

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

Comments

Seyed Kazem Mousavi · Accepted Answer · 2021-07-20 05:45:43Z

0

const test: React.FC<IProps> = () => {
    const buttons1 = (good) => {
        return good.maps((v,i) => {
            return (
                <TextButton
                    key={i}
                    label={v.name}
                    onClick={}
                />
            )
        })
    }

    return(
        <div>
        { buttons1(good) }
        <TextButton
            label={"test1"}
            onClick={}
         />
        </div>
    )
    
}

answered Jul 20, 2021 at 5:45

Seyed Kazem Mousavi

4572 silver badges8 bronze badges

Collectives™ on Stack Overflow

Loop buttons in react.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related