IF-ELSE CONDITION NOT WORKING IN JSX REACT

Question

I am trying to execute an if condition in JSX in foolowing way

{
                        ((selectedWebsite != null) && (selectedWebsite.desktop_prompt != null) &&
                            (typeof selectedWebsite.desktop_prompt !== "undefined")) ?
                        <FormControlLabel style={{"margin-left": "auto"}}
                                          control={<Switch size="small"
                                                           checked={selectedWebsite.desktop_prompt.enabled}
                                                           onChange={handleCheckDesktop}/>}
                        /> :
                        null
                    }

now selectedWebsite is {} and desktop_prompt is undefined but still executing the if condition and i am getting the error TypeError: Cannot read property 'enabled' of undefined. what am i doing wrong here?

Check for undefined should not be in String. So instead of desktop_prompt !== "undefined" check desktop_prompt !== undefined. — tsfahmad, Aug 16 '20 at 14:09
Your provided condition as well as suggested solutions should work. There must be some other problem or maybe you are accessing .enabled somewhere else in code. — tsfahmad, Aug 16 '20 at 14:32

score 0 · Answer 1 · answered Aug 16 '20 at 14:10

0

Since selectedWebsite is an empty object, you can do a check for keys length rather than checking empty object is undefined or null:

{Object.keys(selectedWebsite).length !== 0 ? 
  <FormControlLabel
    style={{"margin-left": "auto"}}
    control={<Switch size="small"
                 checked={selectedWebsite.desktop_prompt && selectedWebsite.desktop_prompt.enabled}
                 onChange={handleCheckDesktop}
              />}
  /> : null}

answered Aug 16 '20 at 14:10

Avanthika

3,984
1
12
19

tried it but still no luck, still getting the same error. i have consoled Object.keys(selectedWebsite).length but it is still executing the code but i should execute null instead – Shoaib Iqbal Aug 16 '20 at 14:16

score 0 · Answer 2 · answered Aug 16 '20 at 14:16

0

try this.

{
                    selectedWebsite && selectedWebsite.desktop_prompt ?
                    <FormControlLabel style={{"margin-left": "auto"}}
                                      control={<Switch size="small"
                                                       checked={selectedWebsite.desktop_prompt.enabled}
                                                       onChange={handleCheckDesktop}/>}
                    /> :
                    null
                }

answered Aug 16 '20 at 14:16

sazzad

505
4
5

tried it but still no luck, still getting the same error. i have consoled Object.keys(selectedWebsite).length but it is still executing the code but i should execute null instead – Shoaib Iqbal Aug 16 '20 at 14:19
can you please mention in the question the value of `selectedWebsite` ? – sazzad Aug 16 '20 at 14:22
only way the code is running is `selectedWebsite.desktop_prompt ` has a value that is neither `null` or `undefined` – sazzad Aug 16 '20 at 14:24
i have mentioned it its an empty object {}. – Shoaib Iqbal Aug 16 '20 at 14:24
i have logged the value of selectedWebsite and selectedWebsite.desktop_prompt in console and its {} and undefined – Shoaib Iqbal Aug 16 '20 at 14:26
check here https://jsbin.com/gomekuliyu/edit?js,console . check the console. its behaving just like i said. I think you are missing something else – sazzad Aug 16 '20 at 14:29
i think `selectedWebsite.desktop_prompt` value changes after a while which in term make the condition valid and execute the code – sazzad Aug 16 '20 at 14:34
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/219911/discussion-between-sazzad-and-shoaib-iqbal). – sazzad Aug 16 '20 at 16:08

IF-ELSE CONDITION NOT WORKING IN JSX REACT

2 Answers2