Navigate back to the homepage

how to map array of objects react native?

Infinitbility
React Native
June 24th, 2022 · 1 min read
how to map array of objects react native?

Hi Friends 👋,

Welcome To Infinitbility! ❤️

To map or iterate an array of objects in react native, just use the map() method it will work like foreach loop and you can easily write components in it.

Like the following example, we can iterate an array of objects using the map() method.

1let domains = [
2 {id: 1, name: "Infinitbility", domain: "infinitbility.com"},
3 {id: 2, name: "aGuideHub", domain: "aguidehub.com"},
4 {id: 3, name: "Sortoutcode", domain: "sortoutcode.com"},
5];
6
7domains.map((domain, index) => console.log(domain, index));
8
9// output
10// {id: 1, name: 'Infinitbility', domain: 'infinitbility.com'} 0
11// {id: 2, name: 'aGuideHub', domain: 'aguidehub.com'} 1
12// {id: 3, name: 'Sortoutcode', domain: 'sortoutcode.com'} 2

Today, I’m going to show you How do i iterate an array of objects in react native components, as above mentioned here, I’m going to use the map() method iterating an array of objects.

Let’s start today’s tutorial how do you map an array of objects in react native?

In this example, we will do

  1. Create a sample array of objects state data
  2. Use the map() method and render an array of objects on a screen
  3. Call component function within map() method

Let’s write code…

1import React, { useState, useEffect } from 'react';
2import { Text, View, StyleSheet } from 'react-native';
3
4const App = () => {
5 const [domains, setDomains] = useState([]);
6
7 useEffect(() => {
8 let domainsArr = [
9 {id: 1, name: "Infinitbility", domain: "infinitbility.com"},
10 {id: 2, name: "aGuideHub", domain: "aguidehub.com"},
11 {id: 3, name: "Sortoutcode", domain: "sortoutcode.com"},
12 ];
13 setDomains(domainsArr);
14 }, []);
15
16 const renderDomain = (domain) => {
17 return (
18 <Text style={styles.paragraph}>
19 {domain.name + ' - ' + domain.domain}
20 </Text>
21 )
22 }
23
24 return (
25 <View style={styles.container}>
26 {
27 domains.map((domain) => { return renderDomain(domain)})
28 }
29 </View>
30 );
31}
32
33const styles = StyleSheet.create({
34 container: {
35 flex: 1,
36 justifyContent: 'center',
37 backgroundColor: '#ecf0f1',
38 padding: 8,
39 },
40 paragraph: {
41 margin: 24,
42 fontSize: 18,
43 fontWeight: 'bold',
44 textAlign: 'center',
45 },
46});
47
48export default App;

TIP: To provide a key in your view element use something like id instead of index

As mentioned above, we are taken the example of an array of objects, use the map() to iterate, and printed it on the screen.

Let’s check the output.

React Native, map array of objects example
React Native, map array of objects example

Try it yourself

I hope it’s help you, All the best 👍.

Follow me on Twitter

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo Photoshop Guide

Tutorials

Categories

More articles from Infinitbility

how to push data into array react native?

how to push data into array react native?

An example of push data into array in react native with step by step guide.

June 24th, 2022 · 1 min read
how to get string length in react native?

how to get string length in react native?

An example of get text length in react native with step by step guide.

June 23rd, 2022 · 1 min read
© 2020–2022 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]