How to get first N number of elements from an array using ReactJS?
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" }}> w3wiki </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.