Last Updated on December 10, 2020.
The map function is used to show a list of elements from an array. Properly saying, The map() method creates a new array with the results of calling a provided function on every element in the calling array.
Map method is commonly used in JavaScript, as you can see in the example given below:
var array = [1, 2, 3, 4];
const map = array.map(element => element * 2);
console.log(map);
// expected output: Array [2, 4, 6, 8]
We can use the map method in React Native easily, especially showing items as lists from an array. In the following react native example, I have declared an array in the state and showed the items as text using the map function. Following is how you use the map function in class-based components.
import React, {Component} from 'react';
import {Text, View} from 'react-native';
export default class Home extends Component {
constructor(props) {
super(props);
this.state = {
array: [
{
key: '1',
title: 'example title 1',
subtitle: 'example subtitle 1',
},
{
key: '2',
title: 'example title 2',
subtitle: 'example subtitle 2',
},
{
key: '3',
title: 'example title 3',
subtitle: 'example subtitle 3',
},
],
};
}
list = () => {
return this.state.array.map((element) => {
return (
<View key={element.key} style={{margin: 10}}>
<Text>{element.title}</Text>
<Text>{element.subtitle}</Text>
</View>
);
});
};
render() {
return <View>{this.list()}</View>;
}
}
You can use map function in functional component as given below.
import React from 'react';
import {View, Text} from 'react-native';
const Home = () => {
const array = [
{
key: '1',
title: 'example title 1',
subtitle: 'example subtitle 1',
},
{
key: '2',
title: 'example title 2',
subtitle: 'example subtitle 2',
},
{
key: '3',
title: 'example title 3',
subtitle: 'example subtitle 3',
},
];
const list = () => {
return array.map((element) => {
return (
<View key={element.key} style={{margin: 10}}>
<Text>{element.title}</Text>
<Text>{element.subtitle}</Text>
</View>
);
});
};
return <View>{list()}</View>;
};
export default Home;
The output will be as given in the screenshot below.

didn’t you get the key error?