How To Check If Variable Is Undefined In React

This article will show you how to check if variable is undefined in React. Here are some ways to do it with examples to make it easier for readers to understand. Read on this article now.

Variable

A variable is an essential element that can hold data, and its value can change throughout a script.

You can imagine that the variable is like some A character that you create in a story. Initially, A character has a specific personality and ability. After the story’s progression, A’s personality and abilities can change.

We use const, let, and var keywords to declare a variable.

• const is used to declare a constant, and its value does not change throughout the program.
• let declares a variable that is only accessible in the block that surrounds it, identifies with the ‘{}‘ pair.
• var declares a variable the user can access globally at outside the function scope.

Code:

var name = Hank; 
let check = true; 
const seven = 7; 

Like other languages, JS variable naming must also follow some of the following rules:

• Variable names must be uppercase or lowercase unsigned letters, digits 0-9, underscores ‘_‘ or the ‘$‘ sign.
• The variable name must start with a letter or an underscore ‘_‘. If it starts with a number, it is an error.
• Reserved words (like JavaScript keywords) cannot be used as names.
• Names are case-sensitive.

Undefined

In Javascript, when you declare a variable but have no value for it, the value of that variable will be undefined. Here are a simple example of undefined values.

Code:

var name;
alert(name);

Output:

undefined

The developer can empty any variable by setting the value to undefined.

Code:

var age = undefined;
alert(age);

Output:

undefined

As you can see, when we define it without assigning it a value or setting undefined, its value will be set as undefined.

Check if variable is undefined in React

Use “===” operator

In the example below, we will use the operator “===” to compare the value of the name state with the undefined value. After that, we can print the <h1> tag to the screen.

Code:

import { useState } from "react";
import "./Access";

function App() {
    const [name, setName] = useState();
    console.log(name);
  
    return (
        <div>
        	<h1>
              	Welcome to LearnShareIT, {name === undefined ? "undefined":name}
        	</h1>
        </div>
    );
}

export default App;

By this way, we could compare the name state with the undefined value. Because it is not defined. The name state is equal to the undefined value, so the value passed to the name in the <h1> tag is also the value above.

Use ‘typeof‘ method 

The typeof operator returns a string that is the JavaScript type for a given value. Same as above, we will compare the value of name state with the undefined value. However, we can get the type of name variable we are looking for to compare with the undefined value.

Code:

import { useState } from "react";
import "./App.css";

function App() {
    const [name, setName] = useState();
    console.log(typeof(name));
    return (
        <div>
	        <h1>
              	Welcome to LearnShareIT, {typeof(name) === 'undefined' ? "undefined":name}
        	</h1>
        </div>
    );
}

export default App;

As we can see above, we will get the value of the type of name state, and it is equal to undefined. So now the developer can check it.

Summary

In summary, there are several methods to check if a variable is undefined in React. You can do it by using === operator or typeof keyword. If you have any problems, please comment below. We will answer as possible. Thanks for reading!

Maybe you are interested:

• How to Listen for State changes in React
• Set and Access state using a Dynamic key in React
• Get the Width of an Element 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