List in React ? How to use map function in react ? Basic Example of map function in React.
In React.js, the map() function is a built-in method that allows you to iterate over an array and create a new array with modified or transformed elements. It is commonly used to generate lists or perform operations on each item of an array.
The map() function takes a callback function as an argument, which is executed for each element in the array. This callback function receives three arguments: the current element being processed, the index of the current element, and the original array.
React Lists
In React, you will render lists with some type of loop.
The JavaScript map() array method is generally the preferred method.
Keys
Keys allow React to keep track of elements. This way, if an item is updated or removed, only that item will be re-rendered instead of the entire list.
Keys need to be unique to each sibling. But they can be duplicated globally.
Explanation:
1. We start by importing the necessary modules. In this case, we only need React.
2. We define a functional component called DPS. This component represents the student list and will render the student names.
3. Inside the DPS component, we create an array called students which contains objects representing each student. Each student object has an id and a name property.
4. In the JSX code, we use curly braces {} to embed JavaScript expressions. We utilize the map function on the students array to iterate over each student object and return a list item element (<li>) for each student’s name.
5. The map function takes an anonymous function as an argument. This function receives each student object as a parameter and returns the desired JSX output. In this case, we extract the id and name properties from each student and use them to set the key and display the student’s name within a list item.