Navigate back to the homepage

how to create array of objects in react native?

Infinitbility
React Native
June 25th, 2022 · 1 min read
how to create array of objects in react native?

Hi Friends 👋,

Welcome To Infinitbility! ❤️

To create an array of objects in react native, just use the [] brackets and curly brace with key value pair for the object.

Like the following example, we can create a sample array of objects like the below example using brackets and curly brace.

1let arrOfObj = [
2 {id: 1, name: "Infinitbility"},
3 {id: 2, name: "aGuideHub"},
4 {id: 3, name: "SortoutCode"},
5];
6
7console.log(arrOfObj);
8// Output
9// [
10// 0: {id: 1, name: 'Infinitbility'},
11// 1: {id: 2, name: 'aGuideHub'},
12// 2: {id: 3, name: 'SortoutCode'}
13// ]

Today, I’m going to show you How do i create an array of objects in react native, as above mentioned here, I’m going to use the brackets and curly brace to create an array of objects and for adding new objects into the array going to use push() method.

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

In this example, we will do

  1. Create a sample array of objects state with sample data
  2. Use the push() method to update the array of objects state
  3. Store array of objects in a state
  4. Print array state in react native app screen

Let’s write code…

1import React, { useState, useEffect } from 'react';
2import { Text, View, StyleSheet } from 'react-native';
3
4const App = () => {
5 const [arr, setArr] = useState([
6 {id: 1, name: "Infinitbility"},
7 {id: 2, name: "aGuideHub"},
8 {id: 3, name: "SortoutCode"},
9 ]);
10
11 useEffect(() => {
12 let arrOfObj = [...arr];
13 arrOfObj.push({id: 4, name: "somethingNew"},);
14 setArr(arrOfObj);
15 }, []);
16
17 return (
18 <View style={styles.container}>
19 <Text>{JSON.stringify(arr)}</Text>
20 </View>
21 );
22}
23
24const styles = StyleSheet.create({
25 container: {
26 flex: 1,
27 justifyContent: 'center',
28 backgroundColor: '#ecf0f1',
29 padding: 8,
30 },
31 paragraph: {
32 margin: 24,
33 fontSize: 18,
34 fontWeight: 'bold',
35 textAlign: 'center',
36 },
37});
38
39export default App;

Note: In the above code I have used […arr] to bypass reference then it will not cause an issue with rendering

As mentioned above, we are taken the example of an array of objects, use the push() to append a new object, and printed it on the screen.

Let’s check the output.

React Native, create array of objects example
React Native, create 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 remove item from array in react native?

how to remove item from array in react native?

An example of remove item from array in react native with step by step guide.

June 25th, 2022 · 1 min read
how to map array of objects react native?

how to map array of objects react native?

An example of map array of objects in react native with step by step guide.

June 24th, 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]