map() in React Native

The map() function is used to iterate over an array and manipulate or change data items. In React, the map() function is most commonly used for rendering a list of data 

To use the map() function, attach it to an array you want to iterate over. The map() function expects a callback as the argument and executes it once for each element in the array.

From the callback parameters, you can access the current element, the current index, and the array itself.

The map() function also takes in an optional second argument, which you can pass to use as this inside the callback. Each time the callback executes, the returned value is then added to a new array.

//import liraries

import React, { Component, useState } from 'react';

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

import { ScrollView } from 'react-native-web';

// create a component

const MyComponent = () => {

  var [students, courses] = useState([

    {name:'ramesh',key:'1'},

    {name:'ramesh',key:'1'},

    {name:'ramesh',key:'1'},

    {name:'ramesh',key:'1'},

    {name:'ramesh',key:'1'},

    {name:'ramesh',key:'1'},

    {name:'ramesh',key:'1'},

    {name:'ramesh',key:'1'},

    {name:'ramesh',key:'1'},

    {name:'ramesh',key:'1'},

    {name:'ramesh',key:'1'},

    {name:'ramesh',key:'1'},

    {name:'ramesh',key:'1'},

    {name:'ramesh',key:'1'},

  ]);

  return (

    <View>

    <ScrollView>

    {

      students.map((item)=>{

        return(

          <View>

            <Text style={styles.container}>{item.name}</Text>

          </View>

        )

      })}

    </ScrollView>

    </View>

  );

};

// define your styles

const styles = StyleSheet.create({

  container: {

    fontSize:"45px"

  },

});

//make this component available to the app

export default MyComponent;