Checking for Undefined In React

Question

I have a scenario where I'm passing data from a reducer into my react state.

data:

{
    "id": 1,
    "title": "Test",
    "content": {
        "body": "sdfsdf"
        "image": "http://example.com"
    }
}

Using componentWillRecieveProps, this works perfectly for retrieving the title.

componentWillReceiveProps(nextProps) {
    this.setState({
        title: nextProps.blog.title,
    })
}

However, I'm having difficulty retrieving the nested fields. When I do this:

componentWillReceiveProps(nextProps) {
    console.log("new title is", nextProps.blog.title);
    console.log("new body content is", nextProps.blog.content["body"]);
    this.setState({
        title: nextProps.blog.title,
        body: nextProps.blog.content["body"]
    })
}

I get this error:

The error of an undefined body goes away after I click the debugger and the content is loaded. Is there anyway I can combat this issue?

I tried to check for undefined like this:

if (typeof nextProps.blog.content["body"] != 'undefined'){

But this doesn't work either and I believe it's because the blog is undefined.

I Think your mistake is that your "body" is nested inside the "content" — naomi, Nov 22 '16 at 06:47
@naomi thanks! I fixed my code to blog.content instead of just content, is that what you meant? I'm still getting the same error. — lost9123193, Nov 22 '16 at 06:53

Shubham Khatri · Accepted Answer · 2017-07-26T08:58:49.280

What you can do is check whether you props is defined initially or not by checking if nextProps.blog.content is undefined or not since your body is nested inside it like

componentWillReceiveProps(nextProps) {

    if(nextProps.blog.content !== undefined && nextProps.blog.title !== undefined) {
       console.log("new title is", nextProps.blog.title);
       console.log("new body content is", nextProps.blog.content["body"]);
       this.setState({
           title: nextProps.blog.title,
           body: nextProps.blog.content["body"]
       })
    }
}

You need not use type to check for undefined, just the strict operator !== which compares the value by their type as well as value

In order to check for undefined, you can also use the typeof operator like

typeof nextProps.blog.content != "undefined"

Ah I see, I was putting undefined in quotations. This did the trick. Thanks! — lost9123193, Nov 22 '16 at 07:51

MD Ashik · Answer 2 · 2020-10-08T22:17:24.500

21

I was face same problem ..... And I got solution by using typeof()

if (typeof(value) !== 'undefined' && value != null) {
         console.log('Not Undefined and Not Null')
  } else {
         console.log('Undefined or Null')
}

You must have to use typeof() to identified undefined

edited Oct 08 '20 at 22:17

answered Feb 09 '18 at 23:41

MD Ashik

9,117
10
52
59

3

Why you give down vote can you make a comment with perfect reason ? – MD Ashik May 25 '18 at 09:35
1

because OR is wrong here ! It should be AND. We want : not undefined AND not null. Both should be true. – Tom Sep 01 '20 at 00:24
1

Thanks to @Tom identified my mistake. – MD Ashik Oct 08 '20 at 22:18

score 5 · Answer 3 · edited Jul 02 '20 at 09:47

5

In case you also need to check if nextProps.blog is not undefined ; you can do that in a single if statement, like this:

if (typeof nextProps.blog !== "undefined" && typeof nextProps.blog.content !== "undefined") {
    //
}

And, when an undefined , empty or null value is not expected; you can make it more concise:

if (nextProps.blog && nextProps.blog.content) {
    //
}

edited Jul 02 '20 at 09:47

Laxmikant Dange

7,606
6
40
65

answered Jul 06 '18 at 19:37

Souvik Ghosh

125
1
5

score 5 · Answer 4 · answered Jan 04 '21 at 12:58

5

You can try adding a question mark as below. This worked for me.

 componentWillReceiveProps(nextProps) {
    this.setState({
        title: nextProps?.blog?.title,
        body: nextProps?.blog?.content
     })
    }

answered Jan 04 '21 at 12:58

Pubudu Jayasanka

1,294
4
18
34

Note: before using, check whether your environment supports [optional chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining). – thisgeek Jan 21 '21 at 19:40

score -4 · Answer 5 · answered May 07 '20 at 12:13

-4

You can check undefined object using below code.

ReactObject === 'undefined'

answered May 07 '20 at 12:13

rahulnikhare

1,362
1
18
25

Type of `undefined` is `undefined` not `String`. – Laxmikant Dange Jul 02 '20 at 09:46

Checking for Undefined In React

5 Answers5

Linked