In this post, we talk about how to map() only a portion of an array in React. We will use the slice() method to get a portion of an array and then call the map() method on that segment. Check out the information below for further information.
To map() only a portion of an array in React
In React, the map() method is used when you want to manipulate an array. It will iterate through each element of the array and return an array of values based on the value of the input array.
To map() only part of an array, follow these steps:
- Use the slice() method to extract the part you need in the original array.
- Apply map() method to that portion.
To illustrate, you can take a look at this example:
import './App.css';
export default function App() {
const students = [
{name: 'Ryan', ranking: 3, grade: 9},
{name: 'Mary', ranking: 1, grade: 10},
{name: 'Antony', ranking: 5, grade: 8},
{name: 'Celine', ranking: 4, grade: 8.5},
{name: 'Michael', ranking: 6, grade: 7.5},
{name: 'Tim', ranking: 2, grade: 9.5},
];
return (
<div>
{/* Get elements from index 1 to before index 3 */}
{students.slice(1,3).map((student) => {
return (
console.log(student)
<div className='container'>
<h1>Student list</h1>
<h2>Student Name: <b className="value">{student.name}</b></h2>
<h2>Ranking: <b className="value">{student.ranking}</b></h2>
<h2>Grade: <b className="value">{student.grade}</b></h2>
<hr />
</div>
);
})}
</div>
);
}
Output:
The slice() method helps us get an array’s segments. It does not mutate the original array, instead creates a new array.
In this example, I have passed to slice method two numbers: 1 and 3, respectively ‘startIndex’ and ‘endIndex’. This means that you will get a new array containing the elements with index ‘1’ coming before index ‘3’ in the original array.
As you can see, we call the map() method and get two objects, the second and third elements, in the students array.
If you want to iterate over N elements in the array, you can pass a negative index to the slice() method. For example:
import './App.css';
export default function App() {
const students = [
{name: 'Ryan', ranking: 3, grade: 9},
{name: 'Mary', ranking: 1, grade: 10},
{name: 'Antony', ranking: 5, grade: 8},
{name: 'Celine', ranking: 4, grade: 8.5},
{name: 'Michael', ranking: 6, grade: 7.5},
{name: 'Tim', ranking: 2, grade: 9.5},
];
return (
<div>
{/* Get the last 2 elements */}
{students.slice(-2).map((student) => {
return (
<div className='container'>
<h1>Student list</h1>
<h2>Student Name: <b className="value">{student.name}</b></h2>
<h2>Ranking: <b className="value">{student.ranking}</b></h2>
<h2>Grade: <b className="value">{student.grade}</b></h2>
<hr />
</div>
);
})}
</div>
);
}
Output:
Obviously, the result is now different from the example above. We get two objects that are the last two elements of the students array, just as intended.
In general, to map() through the N elements of the original array. You can pass the slice() method an index of ‘-N’ or ‘array.length – N’, where ‘array.length’ is the array’s length.
Summary
That’s the end of this article. We have just introduced you how to map() only a portion of an array. Hopefully, through the information above, you know how to apply both methods: slice() and map(), to get the desired results. Good luck for you!
Maybe you are interested:
- Use a map() inside a map() function in React
- Use map() on an Array in Reverse Order in React
- Using the map() method with index in React
My name’s Christopher Gonzalez. I graduated from HUST two years ago, and my major is IT. So I’m here to assist you in learning programming languages. If you have any questions about Python, JavaScript, TypeScript, Node.js, React.js, let’s contact me. I will back you up.
Name of the university: HUST
Major: IT
Programming Languages: Python, JavaScript, TypeScript, Node.js, React.js