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:
Project Structure
Example: Change the number of elements form an array containing 7 values on the user input.
Javascript
import { React, Component } from "react" ;
class App extends Component {
constructor(props) {
super (props);
this .state = { n: 4 };
}
render() {
const list = [1, 2, 3, 4, 5, 6, 7];
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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...