React Native Tab View _renderScene from another class - react-native

Question

I try using Example React Native Tab View https://github.com/react-native-community/react-native-tab-view. I change on const FirstRoute to call from ListMahasiswa class, but there is error : FirstRoute(...) A Valid React element (or null) must be returned.
Main.js
import React, { PureComponent } from 'react';
import { View, StyleSheet } from 'react-native';
import { TabViewAnimated, TabBar, SceneMap } from 'react-native-tab-view';
import ListMahasiswa from './ListMahasiswa';
import InsertDataMhs from './InsertDataMhs';
import Coba from './Coba';
const FirstRoute = () => ListMahasiswa;
const SecondRoute = () => <View style={[ styles.container, { backgroundColor: '#673ab7' } ]} />;
export default class Main extends PureComponent {
state = {
index: 0,
routes: [
{ key: '1', title: 'First' },
{ key: '2', title: 'Second' },
],
};
_handleChangeTab = index => this.setState({ index });
_renderHeader = props => <TabBar {...props} />;
_renderScene = SceneMap({
'1': FirstRoute,
'2': SecondRoute,
});
render() {
return (
<TabViewAnimated
style={styles.container}
navigationState={this.state}
renderScene={this._renderScene}
renderHeader={this._renderHeader}
onRequestChangeTab={this._handleChangeTab}
/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
listMahasiswa.js
import React from 'react';
import {
AppRegistry,
Text,View,Button, ListView, Image, StyleSheet
} from 'react-native';
var URL="http://www.rey1024.com/api/getListMahasiswa.php";
export default class ListMahasiswa extends React.Component{
constructor(props){
super(props);
var ds = new
ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state={
dataSource: ds,
};
}
AmbilDataMahasiswa() {
fetch(URL)
.then((response) => response.json())
.then((responseData) => {
this.setState({
dataSource: this.state.dataSource.cloneWithRows
(responseData),
});
}) .done();
}
render(){
this.AmbilDataMahasiswa();
return(
<View style={styles.mainContainer}>
<Text>Daftar Mahasiswa</Text>
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow}
/>
</View>
);
}
renderRow(record){
return(
<View style={styles.row} >
<Text>{record.nim} {record.nama}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
mainContainer :{
flex:1,
backgroundColor:'#fff'
},
row :{
borderColor: '#f1f1f1',
borderBottomWidth: 1,
flexDirection: 'row',
marginLeft: 10,
marginRight: 10,
paddingTop: 20,
},
})
Have any solution? Thank you

Answer 1

ListMahasiswa in the following line is not a valid React element.
const FirstRoute = () => ListMahasiswa;
Try using jsx syntax instead:
const FirstRoute = () => <ListMahasiswa />;