0
210
ViewsHow to check if a property is null in reactjs?
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.
2 answers
Answer question0
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;0
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.