CODEWITHSUNDEEP
reactjsreact-nativeflatlist
anonymous
anonymous

Reputation: 369

Flatlist not rendering "Text strings must be rendered in text components"

I am trying to render a 2 column flatlist. The array I am using doesn't have id's, just string components. I get the error "text strings must be rendered in text components"

  state = {
    groups: [],
  };
  constructor(props) {
    super(props);
    this.userId = firebase.auth().currentUser.uid;
    this.matches = firestore()
      .collection("users")
      .doc(this.userId)
      .onSnapshot((doc) => {
        this.setState({
          groups: doc.data().matches,
        });
      });
  }
  render() {
    return (
      <View style={styles.container}>
        <FlatList
          contentContainerStyle={styles.list}
          data={this.state.groups}
          keyExtractor={(item, index) => item.id}
          renderItem={({ item }) => (
              <View style={styles.item}>
                <Text style={styles.title}>{}</Text>
                <Image />
              </View>
          )}
        />
        );
        <StatusBar style="auto" />
      </View>
    );
  }
}

Upvotes: 1

Views: 292

Answers (2)

Bhupesh Kumar
Bhupesh Kumar

Reputation: 256

This error is when you use <View> component more than one time like this

render(){
    return(
      <View>
       <Text>Testing purpose</Text>
      </View

      <View>
       <Text>Testing purpose Again</Text> 
      </View>
     )}

Or when you forgot to close any component using '/' like </View>

Upvotes: 1

Konstantin Skrypak
Konstantin Skrypak

Reputation: 111

You should delete two symbols ); before <StatusBar style="auto" />

Upvotes: 2

Related Questions