How to check if a property is null in reactjs?

Question

I am here with a basic question. If I directly compare variables then I can get defined results. But I can not check if a passed value as property is null or undefined. Because it is showing never as null or undefined. So conditional checking not working. So please advice me, how to check if a property is undefined or null.

import { memo, useRef } from "react"; 

const MyComponent = (myList) => {
  const renderTimes = useRef(0);

  return (
    <div>
      {renderTimes.current++}

      <div>Rendered : {renderTimes.current} times.</div>
 

      {console.log(
        "block. Is it null? : ",
        myList === null,
        " is it undefined ? ",
        myList === undefined,
        "Check type:",
        typeof myList === "undefined"
      )}
    </div>
  );
};

export default MyComponent;

<MyComponent myList={undefined} />

If I pass nothing or even I passed named property as null and undefined both the time it shows same result.

The first argument of a component are its props. If you want the actual value you can either destructure ({ myList }) or use props.myList — StackByMe
– StackByMe, Commented Jan 27, 2022 at 8:55
Thanks for replying. I forgot about that, will try. Well still a question why it should be not null when it is not defined? — Rifat
– Rifat, Commented Jan 27, 2022 at 8:57
Because there are lots of things it can be that aren't null or undefined, in this case it is the props object. — Quentin
– Quentin, Commented Jan 27, 2022 at 9:02
even with ({myList}), it still shows as not null, but it shows as undefined. even if I pass <MyComponent myList={null}>. — Rifat
– Rifat, Commented Jan 27, 2022 at 9:03
Of corse you have object like {myList: undefined}, it's not equal null or undefined — Vitaliy Rayets
– Vitaliy Rayets, Commented Jan 27, 2022 at 9:06

dorianDevTech · Accepted Answer · 2022-01-27 09:07:17Z

1

You can modify modify your code as such :

import { memo, useRef } from "react"; 

const MyComponent = (props) => {
  const renderTimes = useRef(0);
  
  // Checks if the "myList" element is defined
  if(this.props.myList === undefined) {
    console.log('myList is not defined')
  }
  
  return (
    <div>
      {renderTimes.current++}

      <div>Rendered : {renderTimes.current} times.</div>
 

      {console.log(
        "block. Is it null? : ",
        {{ props.myList }} === null,
        " is it undefined ? ",
        {{ props.myList }} === undefined,
        "Check type:",
        typeof {{ props.myList }} === "undefined"
      )}
    </div>
  );
};

export default MyComponent;

answered Jan 27, 2022 at 9:07

dorianDevTech

1241 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tbger99 · Accepted Answer · 2022-01-27 09:34:27Z

In short: your 'myList' variable is actually the props object - it would never show a null / undefined value (as it's an object).

The right way to pass values to components (from a parent component) is via the props object. At the child component, you get them using this way (NOTE: without this. as this is a functional component):

Using the example you supplied:

Parent comp (what you've done there was just fine):

<MyComponent myList = {...} />

Child comp:

{props.myList}

(Or without the brackets when used outside the return block.)

By the way, if you'd like to create a render counter, the right way to do that is performing the renderCounter++; command outside the return block (in which you will then display the updated variable), ie,

...

    renderTimes.current++;
  return (
    <div>
      {renderTimes.current}

...

I think you might be getting wrong outputs from the counter this way, not sure though.

Remember that useRef() does not re-render the component, while useState() does (I don't know what exactly you were trying to achieve there, I'm just mentioning it fwiw.

Collectives™ on Stack Overflow

How to check if a property is null in reactjs?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related