Using The Map() Method With Index In React

Posted on by Brent Johnson
Using the map() method with index in React

The map() method in React will be very important because it is a method of the array. So how can we use map() method with index in React? Let’s read this article to find the best answer.

Using the map() method with index in React

How does the map() method work

The map() method will return a new array that each element creates based on the code logic we execute in the callback for each element loop.

Syntax:

Array.map(callback(element, index, array), thisArg)

Parameters:

  • callback: The function called for each time loop through an element.
  • element: Indicate the current element.
  • index: Indicate the index of the current element.
  • thisArg: An object to which can this keyword can refer. It can use as this keyword.

Example:

import { useState } from 'react';

function App() {
    const oldArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    const newArray = oldArray.map((ele, index) => { return ele + 1 });
    console.table(newArray);
    return (
        <div className="App">
        </div>
    );
}

export default App;
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
      	<App />
    </React.StrictMode>
)

Output:

(index)Value
02
13
24
35
46
57
68
79
810
911
  • Array(10)
    • 0: 2
    • 1: 3
    • 2: 4
    • 3: 5
    • 4: 6
    • 5: 7
    • 6: 8
    • 7: 9
    • 8: 10
    • 9: 11
    • length: 10
    • [[Prototype]]: Array(0)

So here, use the map() method and it returns a newArray array which contains the element from oldArray plus 1.

You can also apply the map() method in this way

Example:

import { useState } from 'react';

function App() {
    const [animalList, setAnimalList] = useState([
        {name: 'Atlantic Spotted Dolphins', type: 'A'},
        {name: 'Bactrian Camels', type: 'B'},
        {name: 'Black Necked Stilt', type: 'B'},
        {name: 'Galapagos Flamingo', type: 'G'},
        {name: 'Galapagos Gecko', type: 'G'},
        {name: 'Bactrian Camels', type: 'B'},
        {name: 'Sheep', type: 'S'}
    ]);

    console.log(animalList);
    const showAnimal = (animalList.map((ele) => {
      	return (
        	<>
                <h5>Animal: {ele.name}</h5>
                <h6>Type: {ele.type}</h6>
            </>
      	)
    }));
  
    return (
      	<>
            <h1>Hello From Learn Share IT</h1>
            {showAnimal}
        </>
    );
}

export default App;
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
    	<App />
    </React.StrictMode>
)

In this example, I create an animalList array containing a few objects with name and type properties. Then I use the map() method to loop over all elements in animalList array. Then for each of them, I return the Node element that shows the name and type properties of the object.

Summary

In this article, I’ve shown you some methods to use the map() method with index in React. And I have also shown you an example of how you can use the map() in real situation. I hope you like it. Thanks for your reading!

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *