How To Check If A String Is Empty In React

When working with strings, we should check if the string is empty to avoid incorrect or unexpected errors. This article will show you how to check if a string is empty in React by accessing the ‘length’ property of the string.

Check if a string is empty in React

To check whether a string is empty, we can check through its ‘length‘ property. If the string is zero length, it is an empty string, and vice versa. Alternatively, you can compare the string directly with an empty string.

To illustrate, take a look at the following example:

import './App.css'
import {useEffect, useState} from 'react';

export default function App() {
  const [myString, setMyString] = useState('');

  useEffect(() => {
    
    // Check variables of type string and empty string
    if (typeof myString === 'string' && myString.length === 0) {
      console.log('Empty string');
    } else {
      console.log('Not empty string');
    }
  }, [myString]);

  return (
    <div className='container'>
      <h2>You received message: {myString}</h2>

      <button className='btn btn-success' onClick={() => setMyString("Welcome to LearnShareIT community")}>Get message</button>
    </div>
  );
}

Output:

We use the if/else block to check if the variable we are using is really a string variable and check for the empty string.

As you can see, we have accessed the ‘length‘ property of the ‘myString‘ variable. Compare the length of the string with the value ‘0‘ to see if the string is empty or not. If the string length is zero, the string is empty, and vice versa.

Consider the particular case where a string contains only spaces. If such a string is treated as an empty string, you can use the trim() method to remove all whitespace before checking for an empty string.

The trim() method helps us to remove all leading and trailing whitespace. If the string contains only spaces, it will return an empty string.

Now the if/else block will change as follows:

const whiteSpaces = '           ';

// Use the trim() method to remove leading and trailing whitespace
if (typeof myString === 'string' && myString.trim().length === 0) {
      console.log('Empty string');
    } else {
      console.log('Not empty string');
}

A more intuitive approach is to compare the string directly we are testing with an empty string.

// Compare directly with an empty string
if (typeof myString === 'string' && myString === '') {
      console.log('Empty string');
    } else {
      console.log('Not empty string');
}

However, this approach will not work if the string to be compared contain spaces. Therefore, we do not recommend using this method. At this point, you will need the trim() method, as we mentioned above.

Summary

In summary, we have shown you how to check if a string is empty in React. To do that, you need access to the string’s ‘length‘ property to check the length of the string with the value ‘0‘. Besides, you can also use the trim() method in some specific cases.

Maybe you are interested:

• Concatenate strings and variables in react
• Capitalize the first letter of a String in React
• Using the substring() method in React

Christopher

My name’s Christopher Gonzalez. I graduated from HUST two years ago, and my major is IT. So I’m here to assist you in learning programming languages. If you have any questions about Python, JavaScript, TypeScript, Node.js, React.js, let’s contact me. I will back you up.

Name of the university: HUST
Major: IT
Programming Languages: Python, JavaScript, TypeScript, Node.js, React.js