List view leading to another list view - reactjs

Question

Does anyone has any example of List View that leads to another listview so for e.g if I have the listview that has following things:
Single Family Home
Mulitplex
Duplex
4 bedroom Home
if someone selects single 4 Bedroom Home, I want the user to lead to another List view that shows the places where the 4 bedroom home is available. How can I do this:
Circle Road
Orange
River Road
Ring Road
I am using two JSON file to achieve what I am trying o do:
[
{
"id":0,
"House_Type": "2 Bedroom"
},
{
"id":1,
"House_Type": "3 Bedroom"
},
{
"id":2,
"House_Type": "Condo"
},
{
"id":3,
"House_Type": "4 Bedroom"
},
{
"id":4,
"House_Type": "Duplex"
},
{
"id":5,
"House_Type": "Multiplex"
}
]
Second JSON file
[
{
"id": 0,
"PID" : 0,
"Address": "123 Test Drive",
"Location": "Orange",
"Zip": 123456"
},
{
"id": 1,
"PID" : 0,
"Address" : "234 Test Drive2",
"Location": "Ring Road",
"Zip": "226106"
},
{
"id": 2,
"PID" : 0,
"Address" : "111 Test Drive2",
"Location": "Bell Road",
"Zip": "226172"
},
{
"id": 3,
"PID" : 0,
"Address" : "111 Test Drive2",
"Location": "Bell Road",
"Zip": "226172"
},
{
"id": 1,
"PID" : 1,
"Address" : "111 Test Drive2",
"Location": "Bell Road100",
"Zip": "226172"
},
{
"id": 4,
"PID" : 1,
"Address" : "222 Test Drive3",
"Location": "Ring Road",
"Zip": "226173"
},
{
"id": 5,
"PID" : 1,
"Address" : "333 Test Drive3",
"Location": "Ring100 Road",
"Zip": "221112"
},
{
"id": 6,
"PID" : 1,
"Address" : "333 Test Drive3",
"Location": "Ring100 Road",
"Zip": "221113"
},
{
"id": 7,
"PID" : 2,
"Address" : "444 Test Drive3",
"Location": "Shepard Road",
"Zip": "221113"
},
{
"id": 8,
"PID" : 2,
"Address" : "555 Test Drive3",
"Location": "Shepard1000 Road",
"Zip": "221141"
},
I want something like this:
First List View:
2 Bedroom
3 Bedroom
Condo
4 Bedroom
Duplex
Multiplex
when user selects 2 Bedroom then he/she will be redirected to another list View like below:
123 Test Drive
Orange, 123456
____________________
234 Test Drive2
Ring Road, 226106
_____________________
111 Test Drive2
Bell Road, 226172
__________________
All the above has the Parent ID (PID) of 0 that matches the ID of first JSON file.
if user selects 3 Bedroom then he/she will be redirected to another list View like below:
111 Test Drive2
Bell Road100, 226172
_______________________________
222 Test Drive3
Ring Road, 226173
_____________________________
333 Test Drive3
Ring100 Road, 221112
________________________
In the above case the parent(PID) is 1 that matches the ID of first JSON file.
I have around 100 records in my first JSON file and around 300 records in my second JSON file. I gave some sample data above.
Below is the code and the error description. I am getting an error in the code:
import React, { Component } from 'react';
import { Text, View, StyleSheet, ListView, ActivityIndicator, TextInput, TouchableOpacity } from 'react-native';
import initialData from './src/screens/houses';
import houseDetails from './src/screens/houseDetails';
export default class Information extends Component {
constructor(props) {
super(props);
this.state = {
initialDtata: initialData(),
subObjects: [],
selected_topic_id: -1,
}
}
listView(){
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
var tabsData = ds.cloneWithRows(this.state.initialDtata)
return(
<View>
<ListView
style={{marginVertical: 5}}
enableEmptySections={true}
dataSource={tabsData}
renderRow={(rowData, sectionID, rowID) =>
this.displayHome(rowData, rowID)}
/>
</View>
)
}
displayHome(rowData, rowID) {
return(
<View style={{flex:1}}>
<TouchableOpacity onPress={() => this.onHomeSelection(rowID)}>
<View style={{marginVertical: 15, marginHorizontal:30, justifyContent: 'space-between', flexDirection: 'row',alignItems: 'center'}}>
<Text style={{fontSize: 10, fontWeight: 'bold'}}>{rowData.House_Type}</Text>
</View>
</TouchableOpacity>
{this.state.selected_topic_id === Number(rowID) ? this.renderQuestionList(rowData.id) : null}
</View>
);
}
onHomeSelection(rowID) {
let selected_topic_id = this.state.selected_topic_id === Number(rowID) ? -1 : Number(rowID);
this.setState({
subObjects: houseDetails(),
selected_topic_id: selected_topic_id,
})
}
renderQuestionList(rowID) {
let selected_array = [];
this.state.subObjects.map((i) => { if(i.PID === rowID) return selected_array.push(i)})
let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
let tabsData = ds.cloneWithRows(selected_array)
return(
<View>
<ListView
style={{marginVertical: 5}}
enableEmptySections={true}
dataSource={tabsData}
renderRow={(rowData, sectionID, rowID) =>
this.renderQuestion(selected_array, rowID)}
/>
</View>
)
}
renderQuestion(rowData, rowID) {
let address = rowData.map((i) => {return i.Address})
return(
<View style={{flex:1}}>
<TouchableOpacity>
<View style={{marginVertical: 5, marginLeft:35, marginRight: 35}}>
<Text style={{color: 'black', fontSize: 20, fontWeight: 'bold'}}>{address}</Text>
</View>
</TouchableOpacity>
</View>
);
}
render() {
return (
<View style={{ flex:1, backgroundColor: 'white' }}>
{this.listView()}
</View>
);
}
}
module.exports = {
initialData: function() {
return (
initialDtata = [
{
"id":0,
"House_Type": "2 Bedroom"
},
{
"id":1,
"House_Type": "3 Bedroom"
},
{
"id":2,
"House_Type": "Condo"
},
{
"id":3,
"House_Type": "4 Bedroom"
},
{
"id":4,
"House_Type": "Duplex"
},
{
"id":5,
"House_Type": "Multiplex"
}
]
);
}
}
module.exports = {
houseDetails: function() {
return(
subObjects = [
{
"id": 1,
"PID" : 0,
"Address" : "234 Test Drive2",
"Location": "Ring Road",
"Zip": "226106"
},
{
"id": 2,
"PID" : 0,
"Address" : "111 Test Drive2",
"Location": "Bell Road",
"Zip": "226172"
},
{
"id": 3,
"PID" : 0,
"Address" : "111 Test Drive2",
"Location": "Bell Road",
"Zip": "226172"
},
{
"id": 1,
"PID" : 1,
"Address" : "111 Test Drive2",
"Location": "Bell Road100",
"Zip": "226172"
},
{
"id": 4,
"PID" : 1,
"Address" : "222 Test Drive3",
"Location": "Ring Road",
"Zip": "226173"
}]
);
}
}
Below is the error description:
Invariant Violation: Element type is invalid:
expected a string (for built-in components)
or a class/function(for composite components) but got: object.
This error is located at:
in RCTView (At View.js:60)
in View(at appContainer.js:102)
in RCTView (at View.js:60)
in View (at Appcontainer.js:122)
in AppContainer (at renderApplication.js:32)
any help will be appreciated.

Answer 1

you can try this:
import { initialData } from 'src/screens/houses';
import { houseDetails } from 'src/screens/housesDetails';
export default class Information extends Component {
constructor(props: Object) {
super(props);
this.state = {
initialDtata: initialData(),
subObjects: [],
selected_topic_id: -1,
}
}
listView(){
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
var tabsData = ds.cloneWithRows(this.state.initialDtata)
return(
<View>
<ListView
style={{marginVertical: 5}}
enableEmptySections={true}
dataSource={tabsData}
renderRow={(rowData, sectionID, rowID) =>
this.displayHome(rowData, rowID)}
/>
</View>
)
}
displayHome(rowData: Object, rowID: number) {
return(
<View style={{flex:1}}>
<TouchableOpacity onPress={() => this.onHomeSelection(rowID)}>
<View style={{marginVertical: 15, marginHorizontal:30, justifyContent: 'space-between', flexDirection: 'row',alignItems: 'center'}}>
<Text style={{fontSize: 10, fontWeight: 'bold'}}>{rowData.House_Type}</Text>
</View>
</TouchableOpacity>
{this.state.selected_topic_id === Number(rowID) ? this.renderQuestionList(rowData.id) : null}
</View>
);
}
onHomeSelection(rowID) {
let selected_topic_id = this.state.selected_topic_id === Number(rowID) ? -1 : Number(rowID);
this.setState({
subObjects: houseDetails(),
selected_topic_id: selected_topic_id,
})
}
renderQuestionList(rowID) {
let selected_array = [];
this.state.subObjects.map((i) => { if(i.PID === rowID) return selected_array.push(i)})
let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
let tabsData = ds.cloneWithRows(selected_array)
return(
<View>
<ListView
style={{marginVertical: 5}}
enableEmptySections={true}
dataSource={tabsData}
renderRow={(rowData, sectionID, rowID) =>
this.renderQuestion(selected_array, rowID)}
/>
</View>
)
}
renderQuestion(rowData: Object, rowID: number) {
let address = rowData.map((i) => {return i.Address})
return(
<View style={{flex:1}}>
<TouchableOpacity>
<View style={{marginVertical: 5, marginLeft:35, marginRight: 35}}>
<Text style={{color: 'black', fontSize: 20, fontWeight: 'bold'}}>{address}</Text>
</View>
</TouchableOpacity>
</View>
);
}
render() {
return (
<View style={{ flex:1, backgroundColor: 'white' }}>
{this.listView()}
</View>
);
}
}
you can do import { initialData } from 'src/screens/houses';
module.exports = {
initialData: function() {
return (
initialDtata = [
{
"id":0,
"House_Type": "2 Bedroom"
},
{
"id":1,
"House_Type": "3 Bedroom"
},
{
"id":2,
"House_Type": "Condo"
},
{
"id":3,
"House_Type": "4 Bedroom"
},
{
"id":4,
"House_Type": "Duplex"
},
{
"id":5,
"House_Type": "Multiplex"
}
]
);
}
}
and import { houseDetails } from 'src/screens/housesDetails';
module.exports = {
houseDetails: function() {
return(
subObjects = [
{
"id": 1,
"PID" : 0,
"Address" : "234 Test Drive2",
"Location": "Ring Road",
"Zip": "226106"
},
{
"id": 2,
"PID" : 0,
"Address" : "111 Test Drive2",
"Location": "Bell Road",
"Zip": "226172"
},
{
"id": 3,
"PID" : 0,
"Address" : "111 Test Drive2",
"Location": "Bell Road",
"Zip": "226172"
},
{
"id": 1,
"PID" : 1,
"Address" : "111 Test Drive2",
"Location": "Bell Road100",
"Zip": "226172"
},
{
"id": 4,
"PID" : 1,
"Address" : "222 Test Drive3",
"Location": "Ring Road",
"Zip": "226173"
}]
);
}
}
hey #user54967 sorry for the delay