How to iterate array with an array object in React Native

Question

I'm starting to program in React Native and I have an array like this:

state = {
    territories: [
        {
            id: 1,
            number: 1,
            title: 'Territory 1',
            streets: [
                {
                    id: 1,
                    name: 'Name of street 1',
                    houses: [
                        {
                            id: 1,
                            number: '11',
                        },
                        {
                            id: 2,
                            number: '689',
                        },
                        {
                            id: 3,
                            number: '117a',
                        },
                    ],
                },
                {
                    id: 2,
                    nome: 'Name of street 2',
                    houses: [
                        {
                            id: 4,
                            number: '02',
                        },
                        {
                            id: 5,
                            number: '655',
                        },
                        {
                            id: 6,
                            number: '11b',
                        },
                    ],
                },
            ],
        },
    ],
};

And I want to iterate it with .map() function in order to create a Section List like this example But I can't iterate house's number array within streets array. Is there a way to do that with React Native? Thank you very much in advance

Rahil Ahmad · Accepted Answer · 2018-06-23 02:05:36Z

You need a map to iterate through the territories then through streets and houses. Copy paste the code in codesandbox.io react sandbox. You can fix the html to use a table

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const state = {
  territories: [
    {
      id: 1,
      number: 1,
      title: "Territory 1",
      streets: [
        {
          id: 1,
          name: "Name of street 1",
          houses: [
            {
              id: 1,
              number: "11"
            },
            {
              id: 2,
              number: "689"
            },
            {
              id: 3,
              number: "117a"
            }
          ]
        },
        {
          id: 2,
          name: "Name of street 2",
          houses: [
            {
              id: 4,
              number: "02"
            },
            {
              id: 5,
              number: "655"
            },
            {
              id: 6,
              number: "11b"
            }
          ]
        }
      ]
    }
  ]
};

function App() {
  return state.territories.map(territory => {
    return territory.streets.map(street => {
      return (
        <div>
          <p>{street.name}</p>
          {street.houses.map(house => <div>{house.number} </div>)}
        </div>
      );
    });
  });
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Yossi · Accepted Answer · 2018-06-23 02:02:06Z

0

I would start by writing a streetRender function, which will get a single street object and render it, by doing street.map, iterating by house. This should be a simple map call.

Now I would write a territoryRender function, which gets a single territory, performing territory.map, iterating by street, and for each street perform

return (streetRender(street));

Last step will be to perform territories.map, and for each territory perform

return (territoryRender(territory))

answered Jun 23, 2018 at 2:02

Yossi

6,0877 gold badges50 silver badges83 bronze badges

2 Comments

Gabriel Paiva Over a year ago

This would be for the purpose of organizing the code and also helped me!

Yossi Over a year ago

I am glad. This was the idea :)

Collectives™ on Stack Overflow

How to iterate array with an array object in React Native

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related