JIYIK CN >

To check for null in React, use a comparison to check if a value is equal or not equal null, such as if (myValue === null) {}or if (myValue !== null) {}. If the condition is met, the if block will run.

import {useEffect, useState} from 'react';

export default function App() {
  const [message, setMessage] = useState(null);

  useEffect(() => {
    // ✅ Check if NOT equal to null
    if (message !== null) {
      console.log('variable is NOT null');
    }

    // ✅ Check if null
    if (message === null) {
      console.log('variable is null');
    }

    // ✅ Check if value is NOT equal to null and undefined
    if (message !== undefined && message !== null) {
      console.log('variable is NOT undefined or null');
    }

    // ✅ Check if value is equal to null or undefined
    if (message === undefined || message === null) {
      console.log('variable is undefined or null');
    }
  }, [message]);

  return (
    <div>
      <button onClick={() => setMessage('Hello world')}>Set message</button>

      <h2>{message}</h2>
    </div>
  );
}

In our first if statement, we check if the message variable is not equal to null.

The second example checks if a variable is equal to null.

The third if statement checks if the variable is not equal to undefinedand is not equal to null.

The fourth example checks if a variable is equal to undefinedor equal to null.

We use useEffecta hook to track changes to the message status variable, but we could have performed the check anywhere in our code.

We can also check if a variable stores a truthy value.

Truthful values ​​are all values ​​that are not false.

Falsy values ​​in JavaScript are: undefined, null, false, , 0, ""(empty string), NaN(not a number).

import {useEffect, useState} from 'react';

export default function App() {
  const [message, setMessage] = useState(null);

  useEffect(() => {
    if (message) {
      console.log('✅ variable is truthy');
    }

    if (!message) {
      console.log('⛔️ variable is falsy');
    }
  }, [message]);

  return (
    <div>
      <button onClick={() => setMessage('Hello world')}>Set message</button>

      <h2>{message}</h2>
    </div>
  );
}

The first condition checks whether the message variable stores a true value.

This variable can store any value except 7 false values ​​for the condition to be met.

The second if statement checks whether the variable stores one of seven false values ​​- undefined, null, , false, 0, ""(empty string), NaN(not a number).