React Js Array Length | Length Property

Learn how to get the length of an array in React and JavaScript using the built-in Array.length property. This tutorial will show you how to use this property to count the number of items in an array, whether it is a local array or a state array in React. You will also see how to render the array length in the UI using JSX syntax. This article is suitable for beginners and intermediate developers who want to master React and JavaScript arrays

written

reviewed

updated

How to Count the Number of Items in an Array in ReactJS?

In this React.js component, an array called myArray is defined with five elements. The myArray.length property is used to determine the length of the array, which represents the number of elements it contains. The array length is then displayed within a paragraph element. In this example, it will render "Array length: 5" since there are five items in the myArray. React dynamically updates the displayed length if the array changes, making it a useful way to showcase the current array size in a user interface.

React Js Get Array Length Example

    <script type="text/babel">

        function App() {
            const myArray = ['Laptop', 'Mobile', 'Desktop', 'Mouse', 'Cup'];

            return (
                <div className='container'>
                    <h3>React Js Get Array Length</h3>
                    <p>Array length: <span>{myArray.length}</span></p>
                </div>
            );
        }

        ReactDOM.render(<App />, document.getElementById('app'));
    </script>

xxxxxxxxxx
 
    <script type="text/babel">
​
        function App() {
            const myArray = ['Laptop', 'Mobile', 'Desktop', 'Mouse', 'Cup'];
​
            return (
                <div className='container'>
                    <h3>React Js Get Array Length</h3>
                    <p>Array length: <span>{myArray.length}</span></p>
                </div>
            );
        }
​
        ReactDOM.render(<App />, document.getElementById('app'));
    </script>

Run

Output of React Js Get Array Length

How can I Retrieve the object length in React js ?

To retrieve the object length in React js, you can use the Object.keys() method to convert the object to an array and then use the length property of the array. For example:

React object length

 <script type="text/babel">

        function App() {
            const data = [
                { id: 1, name: 'John' },
                { id: 2, name: 'Jane' },
                { id: 3, name: 'Alice' },
                { id: 4, name: 'Bob' },
                { id: 5, name: 'Emma' }
            ];

            const arrayLength = Object.keys(data).length;

            return (
                <div className='container'>
                    <h3>React Js Get length of Array of Object</h3>
                    <p>Array Length: <span>{arrayLength}</span></p>
                </div>
            );
        }

        ReactDOM.render(<App />, document.getElementById('app'));
    </script>

xxxxxxxxxx
 
 <script type="text/babel">
​
        function App() {
            const data = [
                { id: 1, name: 'John' },
                { id: 2, name: 'Jane' },
                { id: 3, name: 'Alice' },
                { id: 4, name: 'Bob' },
                { id: 5, name: 'Emma' }
            ];
​
            const arrayLength = Object.keys(data).length;
​
            return (
                <div className='container'>
                    <h3>React Js Get length of Array of Object</h3>
                    <p>Array Length: <span>{arrayLength}</span></p>
                </div>
            );
        }
​
        ReactDOM.render(<App />, document.getElementById('app'));
    </script>

Run

Output of React Js Get length of Array of object

How to Find length of array in javascript?

Learn how to count the number of elements in an array using JavaScript. This Exaples covers different methods to get the length of an array, such as the built-in length property. You will also learn how to compare the == and === operators when counting certain elements in an array.

Javascript Array Count

  <script>
        // JavaScript code
        let myArray = [1, 2, 3, 4, 5];
       // Function to display the length of the array
        function checkArrayLength() {
            let arrayOutputElement = document.getElementById("arrayOutput");

            // Display the length of the array
            arrayOutputElement.innerHTML = "<strong>Array Length:</strong> " + myArray.length;
        }
</script>

xxxxxxxxxx
 
  <script>
        // JavaScript code
        let myArray = [1, 2, 3, 4, 5];
       // Function to display the length of the array
        function checkArrayLength() {
            let arrayOutputElement = document.getElementById("arrayOutput");
​
            // Display the length of the array
            arrayOutputElement.innerHTML = "<strong>Array Length:</strong> " + myArray.length;
        }
</script>

Run

Output of Javascript Count Array

Pasted Image

React JS Tutorial