Navigate back to the homepage

How to get array index value in react native?

Infinitbility
React Native
February 11th, 2022 · 1 min read
keep affilitate

Hello Friends 👋,

Welcome To Infinitbility! ❤️

To get index value of element react native have indexOf() and findIndex() method but both have different poupose of use.

Today, we will learn how to get index array elements in react native and we will see examples with an array of string and an array of objects.

Let’s first understand when use indexOf() or findIndex() method.

  • The indexOf() method is used for an array of primitive datatypes like string, number, etc or you can also say single dimension array.

  • The findIndex() method use when find index value from object element.

React Native indexOf() example

The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.

1import React, { useState, useEffect } from 'react';
2import { Text, View, StyleSheet } from 'react-native';
3
4export default function App() {
5 const [users, setUsers] = useState([]);
6
7 useEffect(() => {
8 let users = ['infinitbility', 'notebility', 'repairbility'];
9 setUsers(users);
10 }, []);
11
12 return (
13 <View style={styles.container}>
14 <Text style={styles.paragraph}>
15 index of notebility is {users.indexOf("notebility")}
16 </Text>
17 </View>
18 );
19}
20
21const styles = StyleSheet.create({
22 container: {
23 flex: 1,
24 justifyContent: 'center',
25 backgroundColor: '#ecf0f1',
26 padding: 8,
27 },
28 paragraph: {
29 margin: 24,
30 fontSize: 18,
31 fontWeight: 'bold',
32 textAlign: 'center',
33 },
34});

Output

react native, array, indexOf, example
React Native, array indexOf example.

React Native findIndex() example

The findIndex() method returns the index of the first element in the array that satisfies the provided testing function. Otherwise, it returns -1, indicating that no element passed the test.

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

Output

react native, findIndex, example
React Native, findIndex example.

Thanks for reading…

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.

melio affilitate

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 get current time in react native?

React Native, get current time example.

February 11th, 2022 · 1 min read

How to get object value using the dynamic key in javascript?

Example of access object value using dynamic key in javascript.

February 10th, 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]