How to use array in react native

Hello Friends 👋,

Welcome To Infinitbility! ❤️

To create and use an array in react native, just use square brackets [] it will create an array like the below example.

const names = ["Infinit", "Bility", "Infinitbility"];
    
this.setState({names: names})

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 and update data in array
• 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.

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

ArrayExample.js

import React, { Component } from 'react';
import { View, Text } from 'react-native';

class ArrayExample extends Component {

  constructor(props) {
      super(props);
      
      this.state  =   {
          names : [],
      }

  }
  
  componentDidMount() {
    this.fetchData();
  }
  
  fetchData = async () => {
    // Some consuming task like fetch api or await calls
    const names = ["Infinit", "Bility", "Infinitbility"];
    
    this.setState({names: names});
    
  }

  render() {
    const { names } = this.state;
    return (
    <View>
      {
        names.map((name, index) => (
          <Text>Hello, Hear {name}!</Text>
        ))
      }
    </View>
    );
  }
}

export default ArrayExample;

Thanks for reading…