How to loop inside return statement in javascript

Question

In react native in jsx i want a function to return a loop like these, I am doing like this but my code is saying unreachable in this case.

<View>
  {()=>{
   return ( for(var i=0;i<5;i++){
               <Text>Hello World</Text>
          })
   }}
</View>

check out this answer -> https://stackoverflow.com/questions/11714503/does-return-stop-a-loop — Speedy11, Aug 20 '20 at 07:12

score 2 · Answer 1 · answered Aug 20 '20 at 07:10

2

You can only render a React element.

Here is a simple example, although for loops are barely used.

let content = [];
for (let i = 0; i < 5; i++) {
  content.push(<h1>Hello World using for loop</h1>);
}

const App = () => {
  return (
    <div>
      {content}
      {[...Array(5).keys()].map((key) => (
        <h1 key={key}>Hello World using map</h1>
      ))}
    </div>
  );
};

answered Aug 20 '20 at 07:10

Dennis Vash

50,196
9
100
118

I need for for loop because I need to use the property for-in in my condition also like for(var i in array){} – jordan Aug 20 '20 at 07:24

score 0 · Answer 2 · answered Aug 20 '20 at 07:10

0

use map instead of loop.

Array.from({ length: 5 }).map((v) => <Text key={v}>{v}</Text>)

answered Aug 20 '20 at 07:10

Prateek Thapa

4,829
1
9
23

score 0 · Answer 3 · answered Aug 20 '20 at 07:12

Many solutions:

Writing 5x Hello world

// Function

getList(){
    let texts = []
    for (let index = 0; index < 5; index++) {
        texts.push(<Text>Hello World</Text>)
    }
    return texts
}

// Render

<View>
    {this.getList()}
</View>

Mapping an array of values

// Array

const list = [
    "Hello World",
    "Ad adipisicing ea ut in officia.",
    "Consectetur ipsum commodo reprehenderit sit est aliquip commodo ad qui duis et exercitation.",
    "Est sint esse veniam laborum cillum ullamco aliquip aute eiusmod cupidatat."
]

// Render

<View>
    {list.map((text, index) => <Text key={index}>{text}</Text>)}
</View>

How to loop inside return statement in javascript

3 Answers3