React slice() Reference Guide
What is slice()?
The slice() method returns a shallow copy of an array, selecting elements from a specified start index to an end index (exclusive).
Basic Usage
const numbers = [1, 2, 3, 4, 5];
const sliced = numbers.slice(1, 4);
console.log(sliced); // Output: [2, 3, 4]
Using slice() in a React Component
You can use slice() in React to render a portion of an array dynamically.
import React from "react";
function SliceExample() {
const items = ["Apple", "Banana", "Cherry", "Date", "Elderberry"];
const selectedItems = items.slice(1, 4);
return (
Sliced Items:
{selectedItems.map((item, index) => (
- {item}
))}
);
}
export default SliceExample;
Slice with useState
Using slice() with state management in React:
import React, { useState } from "react";
function SliceWithState() {
const [items] = useState(["Apple", "Banana", "Cherry", "Date", "Elderberry"]);
const [start, setStart] = useState(0);
const [end, setEnd] = useState(3);
const slicedItems = items.slice(start, end);
return (
Sliced Items:
{slicedItems.map((item, index) => (
- {item}
))}
);
}
export default SliceWithState;
Conclusion
The slice() method is useful for extracting parts of an array without modifying the original array. It is commonly used in React when displaying paginated or filtered lists.
JavaScript slice() Method Reference
Using slice() in Vanilla JavaScript
The slice() method returns a shallow copy of a portion of an array into a new array.
const numbers = [1, 2, 3, 4, 5];
const sliced = numbers.slice(1, 4);
console.log(sliced); // Output: [2, 3, 4]
String Example
const text = "Hello, World!";
const slicedText = text.slice(0, 5);
console.log(slicedText); // Output: "Hello"
Using slice() in React
In React, slice() is commonly used to manipulate state or render a subset of data.
Example: Displaying a Subset of Items
import React from "react";
function ItemList({ items }) {
const firstThreeItems = items.slice(0, 3);
return (
{firstThreeItems.map((item, index) => (
- {item}
))}
);
}
export default function App() {
const items = ["Apple", "Banana", "Cherry", "Date", "Elderberry"];
return Example: Paginating Data
import React, { useState } from "react";
function PaginatedList({ items }) {
const [page, setPage] = useState(0);
const itemsPerPage = 3;
const start = page * itemsPerPage;
const paginatedItems = items.slice(start, start + itemsPerPage);
return (
{paginatedItems.map((item, index) => (
- {item}
))}
);
}
export default function App() {
const items = ["Apple", "Banana", "Cherry", "Date", "Elderberry", "Fig", "Grape"];
return What Does .trim() Do?
The .trim() method is a built-in JavaScript function that removes whitespace from both ends of a string.
Example:
let title = " Hello, World! ";
console.log(title.trim()); // Output: "Hello, World!"
What .trim() Removes:
- Leading spaces (before the first character)
- Trailing spaces (after the last character)
- Tabs (
\t) - Newlines (
\n) - Other whitespace characters
This method is useful for sanitizing user input, ensuring that extra spaces do not cause issues when storing or comparing strings.