ReactJs: How to turn a map loop into a for loop?

Question

Ive been wondering what the best way to approach this is, if I should go through the elements of my array with a For loop or Map.

This is my array:

 templates = [ { title: "Grocery List", description: "Description of what this things does so the reader can have info of", imgURL: "https://res.cloudinary.com/deruwllkv/image/upload/v1625753993/groceries.png", id: 0, }, { title: "Shopping Space", description: "blablabalblabla", imgURL: "https://res.cloudinary.com/deruwllkv/image/upload/v1625753766/shopping.png", id: 1, }, { title: "Travel Planning", description: "blablabalblabla", imgURL: "https://res.cloudinary.com/deruwllkv/image/upload/v1625753885/travel.png", id: 2, }, { title: "Travel", description: "blablabalblabla", imgURL: "https://res.cloudinary.com/deruwllkv/image/upload/v1625753993/groceries.png", id: 3, }, ];

Which is processed by my TemplateList component that maps each element. I would like to convert this to a For loop but I dont know how I should approach it. Also, Is it better to have a For loop in this case?

TemplateList:

export type Template = { title: string; description: string; imgURL: string; id?: number; }; type Props = { templates: Template[]; }; const TemplateList = ({ templates }: Props) => { return ( <div className={styles.scrollContainer}> {templates.map((item) => ( <TemplateCard title={item.title} description={item.description} img={item.imgURL} classNameToAdd={styles.cardContainer} key={item.id} /> ))} </div> ); }; export default TemplateList;

This is my TemplateCard component:

 type Props = { title: string; description: string; img: string; classNameToAdd?: string; classNameOnSelected?: string; }; const TemplateCard = ({ title, description, img, classNameToAdd, classNameOnSelected }: Props) => { const { aspectRatio, vmin } = useWindowResponsiveValues(); let className = `${styles.card} ${classNameToAdd}`; const [selected, setSelected] = useState(false); const handleClick = () => { setSelected(!selected); }; if (selected) { className += `${styles.card} ${classNameToAdd} ${classNameOnSelected}`; } return ( <div style={card} className={className} onClick={handleClick}> <img style={imageSize} src={img}></img> <div style={cardTitle}> {title} {selected ? <BlueCheckIcon style={blueCheck} className={styles.blueCheck} /> : null} </div> <div style={descriptionCard}>{description}</div> </div> ); }; TemplateCard.defaultProps = { classNameOnSelected: styles.selected, }; export default TemplateCard;

a for loop doesn't return anything at all. So even if you wanted it wouldnt work — kevin
– kevin, Commented Jul 14, 2021 at 14:04
@kevin the OP could use a for loop to populate another array an return that array. It does not make a lot of sense and I think is less readable, but it can be done. — secan
– secan, Commented Jul 14, 2021 at 14:18
So then he'd still have an array that he'd need to map over in order to generate the jsx, or am i misunderstanding something? @secan — kevin
– kevin, Commented Jul 14, 2021 at 14:33
@kevin a react component can return an array of components and each item will be rendered; you can see a very simple example here: jsfiddle.net/95L7nyfe — secan
– secan, Commented Jul 14, 2021 at 14:56
Thank you for the example in fiddle. will leave it as it is now. — Rakai
– Rakai, Commented Jul 14, 2021 at 15:19

SaimumIslam27 · Accepted Answer · 2021-07-14 16:51:06Z

const number = [1, 2, 3, 4]; //using map example const square_map = number.map(num => num * num); console.log('using map', square_map); //using forEach example const square_Foreach = []; number.forEach(num => square_Foreach.push(num * num)); console.log('using forEach', square_Foreach); //using for example const square_for = []; const number_length = number.length; for (let i = 0; i < number_length; i++) { square_for.push(number[i] * number[i]) }; console.log('using for loop', square_for);

Sarkar · Accepted Answer · 2021-07-14 14:05:30Z

the standard way of doing it is to use map since it will return a component for Each element by default i don't see any use of using forEach or standard for loop specifically in react jsx

Collectives™ on Stack Overflow

ReactJs: How to turn a map loop into a for loop?

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related