Navigate back to the homepage

How to use array in react native

Infinitbility
React Native
August 5th, 2021 · 1 min read
How to use array in react native

Hello Friends 👋,

Welcome To Infinitbility! ❤️

This article will help you to use and manage arrays in react native, here we will learn how to define and store arrays in state, how to show or render arrays data in component, how to use arrays details in react native component.

Let’s start today topic how to use array in react native ✌️

Introduction

We use arrays to store multiple data and objects in variables, and loops to get all details one by one right, but today we use arrays in react native with examples.

We will go like the below topic order.

How to define an array in react native state How to store data in update How to use an array to show data in react native render

Array defines

When we want to store array in react native state then first we create a state with array datatype like below example.

Array usages

Let’s use the below array in react native assume bellow arrays get from the server.

1const names = ["Infinit", "Bility", "Infinitbility"];

ArrayExample.js

1import React, { Component } from 'react';
2import { View, Text } from 'react-native';
3
4class ArrayExample extends Component {
5
6 constructor(props) {
7 super(props);
8
9 this.state = {
10 names : [],
11 }
12
13 }
14
15 componentDidMount() {
16 this.fetchData();
17 }
18
19 fetchData = async () => {
20 // Some consuming task like fetch api or await calls
21 const names = ["Infinit", "Bility", "Infinitbility"];
22
23 this.setState({names: names});
24
25 }
26
27 render() {
28 const { names } = this.state;
29 return (
30 <View>
31 {
32 names.map((name, index) => (
33 <Text>Hello, Hear {name}!</Text>
34 ))
35 }
36 </View>
37 );
38 }
39}
40
41export default ArrayExample;

Thanks for reading…

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]

Tutorials

React Native

Categories

More articles from Infinitbility

How to use async await in react native

How to use async await in react native

React Native async await example

August 5th, 2021 · 1 min read
How to disable textinput in react native

How to disable textinput in react native

React Native disable textinput example

August 4th, 2021 · 1 min read
© 2020–2021 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]