Представление списка, ведущее к другому представлению списка

Есть ли у кого-нибудь пример представления списка, который ведет к другому представлению списка, например, если у меня есть представление списка, в котором есть следующие вещи:

Дом для одной семьи

Mulitplex

Дуплекс

Дом с 4 спальнями

если кто-то выбирает дом с 4 спальнями, я хочу, чтобы пользователь перешел к другому представлению списка, в котором показаны места, где доступен дом с 4 спальнями. Как я могу это сделать:

Кольцевая дорога

апельсин

River Road

Кольцевая дорога

Я использую два файла JSON для достижения того, что я пытаюсь сделать:

[

{
     "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"
  }
]

Второй файл JSON

[
  {
     "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"
},   

Я хочу что-то вроде этого:

Первый просмотр списка:

2 спальни

3 спальни

Кондо

4 спальни

Дуплекс

Мультиплекс

когда пользователь выбирает 2 спальни, он / она будет перенаправлен в другой вид списка, как показано ниже:

123 Test Drive
  Orange, 123456
____________________

 234 Test Drive2
  Ring Road, 226106
_____________________

111 Test Drive2
Bell Road, 226172
__________________

Все вышеперечисленное имеет родительский идентификатор (PID), равный 0, что соответствует идентификатору первого файла JSON.

если пользователь выберет 3 спальни, то он будет перенаправлен в другой вид списка, как показано ниже:

111 Test Drive2
Bell Road100, 226172
_______________________________

222 Test Drive3
Ring Road, 226173
_____________________________

333 Test Drive3
Ring100 Road, 221112
________________________

В приведенном выше случае родительский идентификатор (PID) равен 1, что соответствует идентификатору первого файла JSON.

У меня около 100 записей в моем первом файле JSON и около 300 записей во втором файле JSON. Выше я привел некоторые примерные данные.

Ниже приведен код и описание ошибки. Я получаю ошибку в коде:

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"
          }] 
     );
   }
 }

Ниже приводится описание ошибки:

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)

любая помощь будет оценена по достоинству.