Output variable without using <Text> tag-CodePudding

I want to ask for some advise. I am new to React so I don't know how things work around here. So I want my variable to output this: < Text>Zlin</ Text> < br> (in code: lokace ='' mesta[i] '< /Text>' "\n" ). How do I archieve this? It always wants to be in < Text> when I call for it in return().

I will remake this to output cards that generate in this loop so I can't use < Text>.

import * as React from 'react';
import { StyleSheet, ScrollView, View, Text, Image } from 'react-native';
import { Card, CardTitle, CardContent, CardAction, CardButton, CardImage } from 'react-native-material-cards';
var mesta = ['Zlin','Praha','Ostrava','Brno']


    var cardBeg = ['<Text>']
    var cardEnd = ['</Text>']
    var lokace = []
    for (var i=0; i < mesta.length; i  )
    {
        lokace  ='<Text>'   mesta[i]   '</Text>'   "\n"
    }


export default function Primary({ navigation })
{
    return(
        <ScrollView style=
            {{ 
                flex: 1,
            }}>
            <View style={{ backgroundColor: "violet", borderRadius: 20, alignItems: 'center', margin: 5, padding: 10}}>
                    <Text style={{ fontSize: 26, fontWeight: 'bold' }}>
                    Swag
                    </Text>
                    {lokace}   //this doesnt work
                    <Text>{lokace}</Text>  //this does, but I dont want to output only text and how I said, I will later be outputting whole tables.
                    
            </View>    
            
        </ScrollView>
    );
}

CodePudding user response：

If you want to loop through data in React, you would generally use .map().

So you would just need to map through your mesta array within the JSX. Here's a simplified version of what you need to do:

function Primary() {
  return (
    <ScrollView
      <View>
        <Text>Swag</Text>
        {mesta.map(item => (
          <Text>{item}</Text>
        ))}
      </View>
    </ScrollView>
  )
}

Also, I'd advise against using var when declaring variables. Using let or const are now the best practices. The general rule is to use let when you want to declare a mutable value and const for an immutable one (but it's more of a personal choice!).

CodePudding user response：

i don't know if i get your question coorectly, but maybe this is kindof what you want to do:

instead of {lokace}

{mesta.map((m) => <Text> m </Text> )}

and delete the for loop