How To Check If An Array Is Empty In React

To check if an array is empty in React, you can compare the length of the array with 0. Learn more about it with the explanation and examples below.

Array and its properties

An array is a data type whose value contains many other values. Each value of the array is called an element.

The length property

An attribute that gives the length of the array. If you use a negative integer, an actual number or a string as the index, the array’s length is also the highest positive integer.

Some ways to check if an array is empty in React

Compare if Array.length equals to 0

In this way, we will use the length property of array mentioned above to get the length of the array. Using the method below, we will check the cars array. Let’s see an example that can be applied to real problems below to understand how this method works.

Code:

import { useEffect, useState } from 'react';
 
export default function App() {
    const [cars, setCars] = useState([]);
    const [currentCar, setCurrentCar] = useState("");
    useEffect(() => {
        if (cars.length === 0) {
          	console.log('Array is empty');
        } else {
          	console.log('Array is not empty');
        }
    }, [cars]);

    return (
        <div>
            <h1>Cars: {JSON.stringify(cars)}</h1>
            <input 
              	type="text" 
              	name="cars" 
              	placeholder="Enter car name" 
              	onChange={(e) => { setCurrentCar(e.target.value); }}
             />
            <button onClick={() => setCars(current => [...current, currentCar])}>
            	Add Car
            </button>
        </div>
    );
}

Output:

Array is empty

In this example, firstly, we have an empty cars array. When comparing its length with the 0 value, it will return true and caught in the if statement, so the program printed the console: ‘Array is empty’. But after we added the string car array to the array, the array was no longer empty and returned a different value.

Compare if Array.length is greater than 0

In this way, we also use the Array.length method to get the length value of the array and compare it. However, the logic will be slightly different in that we will find if it is greater than 0. If more significant, the array is not empty and reverse, so we also get the same result as above.

Code:

import {useEffect, useState} from 'react';

export default function App() {
    const [cars, setCars] = useState([]);
    const [currentCar, setCurrentCar] = useState("");
    useEffect(() => {
        if (cars.length > 0) {
          	console.log('Array is not empty');
        } else {
          	console.log('Array is empty');
        }
    }, [cars]);

    return (
        <div>
            <h1>Cars: {JSON.stringify(cars)}</h1>
            <input 
              	type="text" 
              	name="cars" 
              	placeholder="Enter car name" 
              	onChange={(e) => { setCurrentCar(e.target.value); }}
            />
            <button onClick={() => setCars(current => [...current, currentCar])}>
            	Add Car
            </button>
        </div>
    );
}

Output:

Array is empty

We’ve gone through two examples of two simple ways to check if an array is empty or not. According to my research, we can also find the length value of the array using the Array.size() method. Although the program still runs, it is not a smart way. I hope this article helps you.

Summary

To summarize, this article shows you two ways to check if an array is empty in React. You can compare if Array.length equals to 0 methods or if Array. length is greater than 0 to get the same result. Let’s try them!

Maybe you are interested:

• How to generate Option tags for Select from an Array in React
• Check if Variable is Undefined in React
• How to check if an Element is focused in React

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs