How to get first N number of elements from an array using ReactJS?

Last Updated : 02 Nov, 2023

To get the first N number of elements from an array using React JS simply means to display the N number of elements of the array.

Prerequisites

Approach to get first N number of elements:

We will create an array containing some values using the react class component and from the user input, we will display n number of elements on the page. We can use array.slice method to get the first N numbers from the array.

Syntax:

array.slice(0, n);

Note: The slice function on arrays returns a shallow copy of the array, and does not modify the original array. And if N is larger than the size of the array then it won't through any error and returns the whole array itself.

Stpes to create React Application

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Project Structure:

Example: Change the number of elements form an array containing 7 values on the user input.

JavaScript

// Filename - App.js

import { React, Component } from "react";
class App extends Component {
    constructor(props) {
        super(props);
        this.state = { n: 4 };
    }

    render() {
        // Numbers list
        const list = [1, 2, 3, 4, 5, 6, 7];

        // Slice function call
        let items = list.slice(0, this.state.n).map((i) => {
            return (
                <button
                    style={{
                        margin: "10px",
                        backgroundColor: "blue",
                        color: "white",
                        padding: "10px",
                        border: "blue 2px",
                        borderRadius: "2px",
                    }}
                    type="button"
                >
                    {i}
                </button>
            );
        });

        return (
            <div
                style={{
                    textAlign: "center",
                    margin: "auto",
                }}
            >
                <h1 style={{ color: "green" }}>
                    GeeksforGeeks
                </h1>
                <h3>
                    React Example for first N numbers form
                    an Array containg 1 to 7
                </h3>
                <input
                    min={1}
                    max={7}
                    value={this.state.n}
                    onChange={(e) =>
                        this.setState({ n: e.target.value })
                    }
                    placeholder="Enter a number from 1 to 7"
                ></input>
                <div>{items}</div>
            </div>
        );
    }
}

export default App;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: This output will be visible on http://localhost:3000/ on the browser window.