React State Array Get Length Example
In this quick tip article, we'll see how to get the length of an array or state array in React.
React is a JavaScript library for rendering user interfaces therefore it simply deals with the UI and doesn't provide its own utilities for handling arrays or similar tasks. As a result, you simply need to use the built-in JavaScript methods and APIs.
JavaScript' Array Length by Example in React
In this example, we'll see how to get the length of an array in React and JavaScript.
JavaScript already provides many built-in methods for getting the length of an array, let's see how to use in a React example.
The length property of an object which is an instance of type Array sets or returns the number of elements in that array. The value is an unsigned, 32-bit integer that is always numerically greater than the highest index in the array. Source
Create an index.js
file and add the following code:
import React from 'react'
class App extends React.Component {
render(){
const array = ["React","is", "awesome", "!"];
const length = array.length;
return(
<div>
<p>Array length is { length }.</p>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById("root"));
In the render()
method, we simply define a JavaScript array then we get the length of the array using the Array.length
method. Finally we return a JSX markup to didplay the length of the array.
You should import React and ReactDOM in your project and use ReactDOM to mount the component in the DOM:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
In the same way, you can get the length of the array in React state as follows:
class App extends React.Component {
state = {
array: ["Hello", "React"]
};
render() {
return (
<div>
<p>React State Array Length: {this.state.array.length}</p>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
Conclusion
In this quick example, we've seen how to use the Array.length
method to get the length of a local array or state array and render the result in the DOM.
Get our Angular 2+ posts in your inbox
Buy our Full-Stack Angular 11 and GraphQL Book
Build a social app from scratch..