Menu
I want to make a list of fields depending on the number of the player that user has selected. I wanted to make something like this:
generatePaymentField() {
var noGuest = this.state.guest;
var payment =
<View>
<View>
<View><Text>No</Text></View>
<View><Text>Name</Text></View>
<View><Text>Preference</Text></View>
</View>;
for (var i=0; i < noGuest; i++) {
payment = payment +
<View>
<View>
<TextInput />
</View>
<View>
<TextInput />
</View>
<View>
<TextInput />
</View>
</View>;
}
return payment;
}
render () {
var payment = this.generatePaymentField();
this.setState({payment : payment});
return (
<View>
{this.state.payment}
</View>;
)
}
But react-native regarded the syntax above as 'unexpected token' pointing at the for loop line. Is there any other way I can achieve doing this?
514
To loop and render elements in React Native, we can use the JavaScript array map method. to call arr. map with a callback to return the Text component with the entry a as the text. We set the key prop to a unique value for each entry so that React can identify the rendered components.
It is very popular to use loops like for-loop (in most cases the fastest one), for-in, or for-of to iterate through elements. That method is useful when we use separate functions to render part of components, and it's the best method for performance.
In this article, you are going to learn about how to use forEach loop in react. In JavaScript, the forEach() loop is considered as an array method that is used to iterate each item of an array with the help of a callback function.
Most of these ways are covered in this article about React JSX loops, and although it's using React examples, everything from it can be used in React Native. Please check it out if you're interested in this topic!
How to For Loop in React (With Examples) To For Loop or Map in React. As with most things in web development, there are multiple ways to loop, or iterate,... Using The Map Function in React. Introduced in ES6, the Map array function is by far my most used method of iterating... Use a Unique Key for ...
Out of the three iterators above, our best option to iterate over an array in React inside of JSX is the Map function. Let’s begin by exploring how we can use the Map iterator to loop through elements in an array and render out some HTML for each of those elements.
After setting up the initial React project and calling data from the API using axios our object data will look something like this. Now lets loop through this object using different methods available. The for/in loops through the properties of an object. The block of code inside the loop will be executed once for each property.
This should work
render(){
var payments = [];
for(let i = 0; i < noGuest; i++){
payments.push(
<View key = {i}>
<View>
<TextInput />
</View>
<View>
<TextInput />
</View>
<View>
<TextInput />
</View>
</View>
)
}
return (
<View>
<View>
<View><Text>No</Text></View>
<View><Text>Name</Text></View>
<View><Text>Preference</Text></View>
</View>
{ payments }
</View>
)
}
render() {
var myloop = [];
for (let i = 0; i < 10; i++) {
myloop.push(
<View key={i}>
<Text>{i}</Text>
</View>
);
}
return (
<View >
<Text >Welcome to React Native!</Text>
{myloop}
</View>
);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
