CODEWITHSUNDEEP
javascriptreactjsreact-native
godfather_satyajeet
godfather_satyajeet

Reputation: 93

Invariant Violation: Text strings must be rendered within a component

i am trying to print the numbers from 1 to 10 such that a user can press on any of these. However ,I am getting this error which reads

Invariant Violation: Text strings must be rendered within a <Text> component.

Here is the code inside render .

render(){
         let arr=[];
         for(let index=1;index<=this.state.max_rating;index++){
             arr.push(
                 <TouchableOpacity
                      activeOpacity={0.7}
                      key={index}
                      onPress={this.UpdateRating.bind(this, index)}>
                      <Text key={index}>
                        {'lol'}
                      </Text>
                   >
                </TouchableOpacity>
              );
         }

         return(
             <View style={styles.MainContainer}>
              <Text> The code is working man </Text>
              <View style={styles.childView}>{arr}</View>
             </View>
         );
     }

Upvotes: 1

Views: 332

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281646

There is a slight syntax issue in your code

for(let index=1;index<=this.state.max_rating;index++){
         arr.push(
             <TouchableOpacity
                  activeOpacity={0.7}
                  key={index}
                  onPress={this.UpdateRating.bind(this, index)}>
                  <Text key={index}>
                    {'lol'}
                  </Text>
               > <-- extra character which is treated as a string giving you the warning
            </TouchableOpacity>
          );
     }

Remove the > character rendered within <TouchableOpacity> component and it will work fine

Upvotes: 3

Related Questions