Navigate back to the homepage

How to get first element of array in react native?

Infinitbility
React Native
October 25th, 2021 · 1 min read
How to get first element of array in react native?

Hello Friends 👋,

Welcome To Infinitbility! ❤️

This tutorial will help you to get the first element of your array into react native, here we will use simple array concepts available in javascript to get the first element of the array.

Let’s start today tutorial How to get the first element of the array in react native?

let assume you have like the below example.

1var exampleArray = [
2 {
3 id: 1,
4 name: "Infinit"
5 },
6 {
7 id: 2,
8 name: "Bility"
9 }
10];

Array provides the option to access elements using index. but before accessing element by index first verify array length. like the below example.

1if(exampleArray.length > 0){
2 let firstElement = exampleArray[0];
3
4 console.log(firstElement, firstElement.name);
5}

React Native get first element example

Here, i’m store exampleArray on state and write access code in render function.

1import React, { Component } from "react";
2import { Button, Text, View } from "react-native";
3
4class FirstElement extends Component {
5 state = { exampleArray: [
6 {
7 id: 1,
8 name: "Infinit"
9 },
10 {
11 id: 2,
12 name: "Bility"
13 }
14]};
15
16 render() {
17 let firstElement = {};
18 if(this.state.exampleArray.length > 0){
19 firstElement = this.state.exampleArray[0];
20 }
21 return (
22 <View>
23 <Text>{firstElement.id}-{firstElement.name}</Text>
24 </View>
25 );
26 }
27}
28
29export default FirstElement;

Output

React Native, access, first, element, Example

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

Tutorials

Categories

More articles from Infinitbility

How to get ip address in react native?

How to get ip address in react native?

React Native network info getIPAddress example

October 24th, 2021 · 1 min read
How to get current month name in react native?

How to get current month name in react native?

React native getMonth name example

October 23rd, 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]