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.

Definition and Usage
map() creates a new array from calling a function for every array element.

map() calls a function once for each element in an array.

map() does not execute the function for empty elements.

map() does not change the original array.

Syntax
array.map(function(currentValue, index, arr), thisValue)
Parameters
Parameter Description
function() Required.
A function to be run for each array element.
currentValue Required.
The value of the current element.
index Optional.
The index of the current element.
arr Optional.
The array of the current element.
thisValue Optional.
Default value undefined.
A value passed to the function to be used as its this value.
Return Value

Type Description
An array The results of a function for each array element.

Here in this example you can see, map function with array of values :

import React from 'react';

  var abc = ["Reactjs","JavaScript","Expressjs"]

function App() {
  return (
    <div>
      {
        abc.map((value)=><li>{value}</li>        
        )
      }
    </div>
  );
}

export default App;

And..

Here you can use Objects Valus are an veriable , it includes key value in map() function

import React from 'react';

  var abc = [
    {
      name: 'Python',
      student: 13,
      fees: 10
    },
    {
      name: 'Javascript',
      student: 15,
      fees: 12
    },
    {
      name: 'PHP',
      student: 5,
      fees: 10
    },
    {
      name: 'Java',
      student: 10,
      fees: 5
    },
    {
      name: 'C#',
      student: 9,
      fees: 4
    },
    {
      name: 'C++',
      student: 10,
      fees: 8
    },
  ];

  // var abc = ["Reactjs","JavaScript","Expressjs"]

function App() {
  return (
    <div>
      {
        abc.map((value)=><li key={value.name}>{value.student}</li>        
        )
      }
    </div>
  );
}

export default App;

maping the external data file into react js

db.json file

[
{
"id": 1,
"title": "Reactjs",
"content":"this is react js"
},
{
"id": 2,
"title": "JavaScript",
"content":"this is react js"
},
{
"id": 2,
"title": "MUI",
"content":"this is react js"
},
{
"id": 3,
"title": "Angular",
"content":"this is react js"
}
]

and Map The data.json , file

import React from 'react';
import data from './db.json';

export default function App(){
return(

    {
    data.map((data)=>{
      return(
        <div className='box' key={data.id}>
          <strong>{data.title}</strong> <br />
          <strong>{data.content}</strong>
        </div>
      )
    })
    }


  </div>
);

}

for more references https://codeguruva.blogspot.com/