How do I "loop" in React?

Question

I currently have

const prices = purchases.map(purchases => <div>{purchases.price}</div>)
const name = purchases.map(purchases=> <div>{purchases.drinkname}</div>)

For each element in the prices and name lists, I want to return it in a react component.

Instead of hardcoding it for every single element in prices and name like this:

return (
<div className ="whitespace-nowrap">{name[0]}</div>
<div className = "flex whitespace-pre">Price: ${prices[0]}</div>
<div className ="whitespace-nowrap">{name[1]}</div>
<div className = "flex whitespace-pre">Price: ${prices[1]}</div>
<div className ="whitespace-nowrap">{name[2]}</div>
<div className = "flex whitespace-pre">Price: ${prices[2]}</div>
etcetc
)

Is it possible to achieve this by "looping" through every index?

Why not map `purchases` directly instead of creating two separate arrays? — DBS, May 12 '21 at 10:13
Does this answer your question? [Loop inside React JSX](https://stackoverflow.com/questions/22876978/loop-inside-react-jsx) — T J, May 12 '21 at 10:16

score 0 · Answer 1 · answered May 12 '21 at 10:14

0

This could work for you

{[...Array(prices.length).keys()].map(i => (
  <div className ="whitespace-nowrap">{name[i]}</div>
  <div className = "flex whitespace-pre">Price: {prices[i]}</div>
))}

answered May 12 '21 at 10:14

L. Letovanec

535
2
6

score 0 · Answer 2 · answered May 12 '21 at 10:14

0

Look for something like "Component Loop in React", example:

 let items=['Item 1','Item 2','Item 3','Item 4','Item 5'];
 <ul>
     {items.map((item,index)=>{
         return <li key={index}>{item}</li>
     })}
 </ul>

answered May 12 '21 at 10:14

Tomasz Waszczyk

2,680
5
35
73

score 0 · Answer 3 · answered May 12 '21 at 10:15

Try something like below:-

  return (
    <>
      {purchases.map(purchase => (
        <>
          <div className="whitespace-nowrap">{purchase.drinkname}</div>
          <div className="flex whitespace-pre">Price: ${purchase.price}</div>
        </>
      ))}
    </>
  );

score 0 · Answer 4 · answered May 12 '21 at 10:15

Currently you:

Map purchases to get a bit of what you want
Map purchases again to get a different bit of what you want
Try to glue the results together

Just map once and return what you want then.

purchases.map(purchases => {
    return <>
        <div className="whitespace-nowrap">{purchases.name}</div>
        <div className="flex whitespace-pre">Price: ${purchases.price}</div>

    </>
});

score 0 · Answer 5 · answered May 12 '21 at 10:16

function xyz() {
    const prices = purchases.map(purchases => <div>{purchases.price}</div>);
    const names = purchases.map(purchases=> <div>{purchases.drinkname}</div>);

    let elements = [];
    for(let i = 0; i < name.length; i++) {
        let element_name = (<div className ="whitespace-nowrap">{name[i]}</div>);
        let element_price = (<div className = "flex whitespace-pre">Price: ${prices[i]}</div>);
        elements.push(element_name);
        elements.push(element_price);
    }

    return elements;
}

score 0 · Answer 6 · answered May 12 '21 at 10:18

Why use two time map loop as have single array.? check below code if useful.

return (
    {
        purchases.map(purchases => (
            return (
                <div className ="whitespace-nowrap"><div>{purchases.drinkname}</div></div>
                <div className = "flex whitespace-pre">Price: <div>${purchases.price}</div></div>
            )
        ))
    }
)

How do I "loop" in React?

6 Answers6