React JS Check if Array or Object is Empty Tutorial

React JS Check if Array or Object is Empty Tutorial

Check if array or object is empty react js example; In this quick tutorial, you will look out how to check if array or object is empty or not in react js. Before start mapping the array, check or it is good to check that the data array is empty or not in react js.

An array is a data structure, which can store a fixed-size collection of elements of the same data type. An array is used to store a collection of data, but it is often more useful to think of an array as a collection of variables of the same type.

Now this Check if array or object is empty react js tutorial; you will find the complete guide on how to Check if array or object is empty in react js app using JS Array method.

How to Check if Array or Object is Empty in React Js

  • Step 1 – Create React App
  • Step 2 – Install React Bootstrap
  • Step 3 – Create Check Array Component
  • Step 4 – Import Check Array Component in App.js

Step 1 – Create React App

In this step, open your terminal and execute the following command on your terminal to create a new react app:

npx create-react-app my-react-app

To run the React app, execute the following command on your terminal:

npm start

Check out your React app on this URL: localhost:3000

Step 2 – Install React Bootstrap

In this step, execute the following command to install react boostrap library into your react app:

npm install bootstrap --save

Add bootstrap.min.css file in src/App.js file:

import React, { Component } from 'react'

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <div>
      <h2>How to Check if Array or Object is Empty in React Js</h2>
    </div>
  );
}

export default App;

Step 3 – Create Check Array Component

In this step, create CheckArrayComponent.js file. So, visit the src directory of your react js app and create array component file named CheckArrayComponent.js. And add the following code into it:

import React from 'react'

class CheckArrayComponent extends React.Component{

    render(){
        var myArr = [];

        if(myArr.length > 0){
            var items = myArr.map((item) =>
                <li>{item}</li>
            );
        }else{
            var items = <li>Array is Empty.</li>
        }

        return(
            <div>
                {items}
            </div>
        );
    }
}

export default CheckArrayComponent;

Step 4 – Import Check Array Component in App.js

In this step, you need to add CheckArrayComponent.js file in src/App.js file:

import React from 'react';

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

import CheckArrayComponent from './CheckArrayComponent'

function App() {  
    
  return (  
    <div className="App">  
      <CheckArrayComponent />  
    </div>  
  );  
}  

export default App;

Conclusion

Check if array or object is empty react js example; In this quick tutorial, you have learned how to check if object is empty or not in react js.

Recommended React JS Posts

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *