React Native Component Not Rendering

Question

I have two classes, ActivityList, and ActivityDetail. ActivityList queries for some data and then calls ActivityDetail with the information it receives. I console logged the information and checked to see if it is coming in the desired form. It is. However, for some reason ActivityDetal is not rendering into ActivityList.

ActivityList.js

 import React, { Component } from 'react'; import { ScrollView } from 'react-native'; import firebase from 'firebase'; import ActivityDetail from './ActivityDetail'; import { getCurrentUser } from '../../models/User'; class ActivityList extends Component { getActivityList() { getCurrentUser() .then(currentUser => currentUser.teacherList.map(batch => firebase.database().ref(`/batches/${batch}`) .once('value') .then(Class => firebase.database().ref(`/users/teachers/${Class.val().Teacher}`) .once('value') .then(teacher => this.renderActivityList(teacher.val()))))); } renderActivityList(teacher) { console.log(teacher); return <ActivityDetail key={teacher.Name} person={teacher} />; } render() { return ( <ScrollView> {this.getActivityList()} </ScrollView> ); } } export { ActivityList }; 

ActivityDetail.js

 import React from 'react'; import { Text, Image, View, Dimensions } from 'react-native'; import { Card, CardSection } from './'; const { width } = Dimensions.get('window'); const ActivityDetail = ({ person }) => { console.log('working'); return ( <Card style={{ flex: 1, flexDirection: 'row' }}> <CardSection> <Image style={styles.headerStyle} source={{ uri: person.Header }} /> <View style={styles.containerStyle}> <Image style={styles.profileStyle} source={{ uri: person.Profile }} /> </View> <View style={{ width: 0.93 * width, height: 0.09 * width }} /> </CardSection> <CardSection> <View style={styles.textContainerStyle}> <Text style={styles.nameStyle}>{person.Name}</Text> <Text style={styles.classStyle}>{person.Subject}</Text> </View> </CardSection> </Card> ); }; const styles = { profileStyle: { height: 0.13 * width, width: 0.13 * width, alignSelf: 'center', resizeMode: 'cover', }, containerStyle: { width: 0.18 * width, height: 0.18 * width, borderRadius: (0.18 * width) / 2, backgroundColor: '#d5d5d5', paddingLeft: 5, paddingRight: 5, justifyContent: 'center', alignItems: 'center', alignSelf: 'center', top: 65, position: 'absolute', }, nameStyle: { fontSize: 20, color: '#000', paddingBottom: 5, }, headerStyle: { width: 0.93 * width, height: 0.25 * width, borderRadius: 4, flex: 2, }, textContainerStyle: { justifyContent: 'center', alignItems: 'center', flex: 1, }, classStyle: { fontSize: 18, color: '#aaa', }, }; export default ActivityDetail; 

Answer 1

The problem here is that in your ActivityList component's render function, you are rendering the result of this.getActivityList , which is always gonna be undefined.

You should instead trigger the data fetch in componentWillMount and use setState to set the data to the component state for rendering.

eg

class ActivityList extends Component {
  constructor(props) {
    super(props);
    this.state = { teacher: {} };
  }

  componentWillMount() {
    this.getActivityList();
  }

  getActivityList() {
    ... // get Data
    this.setState({ teacher : data });
  }

  render() {
    return (
      <ScrollView>
        <ActivityDetail key={this.state.teacher.Name} person={this.state.teacher} />
      </ScrollView>
    );
  }
}