CODEWITHSUNDEEP
javascriptreactjsreact-nativenative
khalD
khalD

Reputation: 324

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

creating an application in react-native running into this problem. basically I should create a page that prints the data of the user currently logged in to the database (firebase). I managed to create a sort of leaderboard that prints all users with data, on another page, but I can not figure out where I was wrong. can someone help me?

https://snack.expo.io/@khal_d/proj-p-3

import React, { Component } from 'react';
import { View, TouchableOpacity, StyleSheet, Button, Text, ScrollView, ListItem } from 'react-native';
import { Input, Card} from 'react-native-elements';

import * as firebase from 'firebase';


export default class User extends Component {
   static navigationOptions = {
    title: 'UserInfo',
  };

  state = {
    data: [],
  };

  // Controllare qui
  componentDidMount(){
    //leggere array dal db
    const currentUID = firebase.auth().currentUser.uid;
    const path ="/users/" + currentUID;
    const users = firebase.database().ref(path);
    users.on("value", snap => {
      console.log("log di snap" + snap);
      //ciclo
      var elenco = [];
      snap.forEach(child => {
        elenco.push({
          name: child.val().name,
          surname: child.val().surname,
          email: child.val().email,
          image: child.val().image,
        })
      });

      console.log("altro log finale" + elenco);
      this.setState({data:elenco})
    });

  }

// controllare fino a qua

  render() {

    return (
      <ScrollView>
      <View>
        <Card> //fix evertything all'interno di card
          {
    this.state.data.map((l, i) => (
      <ListItem
        key={i}
        leftAvatar={{ source: { uri: l.image } }}
        title={l.name}
        subtitle={l.surname}

      />
    ))
  }
        </Card>
      </View>
      </ScrollView>
    );
  }
}

Upvotes: 4

Views: 2937

Answers (3)

Saeid
Saeid

Reputation: 2036

Just delete the comments and extra { }from your code in render() or use them as below. In JSX you cannot have // in render():

 render() {

    return (
      <ScrollView>
      <View>
        <Card> 

    { this.state.data && 
    this.state.data.map((l, i) => (
      <ListItem
        key={i}
        leftAvatar={{ source: { uri: l.image } }}
        title={l.name}
        subtitle={l.surname}

      />
    ))
    }

      </Card>
      </View>
      </ScrollView>
    );
  }
}

iOS has no problem with extra syntaxes in render(), but in android it will show that error.

Also because of asynchronous problem of setState, you will have and error of undefined is not an object. So it is better to have {this.state.data && condition on your ListItem. I hope I could help :)

Upvotes: 1

Hemadri Dasari
Hemadri Dasari

Reputation: 33974

I think the issue is because of the comment. In JSX, comment with // doesn't work. It will be treated as a text.

You have to change your comments like below which will fix your issue

    {/* fix evertything all'interno di card */}

Upvotes: 1

Guillaume Munsch
Guillaume Munsch

Reputation: 1283

ListItem should be imported from react-native-elements and not from react-native.

Upvotes: 0

Related Questions