Navigate back to the homepage

how to check nan in react js?

Infinitbility
React
August 8th, 2022 · 1 min read
how to check nan in react js?

Hi Friends 👋,

Welcome To Infinitbility! ❤️

To check or handle NaN in react js, use the isNaN() method it will return if the value is not a number, if the value is a number it will return false.

Let’s understand when the isNaN method returns false or when true.

1Number.isNaN(NaN); // true
2Number.isNaN(Number.NaN); // true
3Number.isNaN(0 / 0); // true
4
5// e.g. these would have been true with global isNaN()
6Number.isNaN('NaN'); // false
7Number.isNaN(undefined); // false
8Number.isNaN({}); // false
9Number.isNaN('blabla'); // false
10
11// These all return false
12Number.isNaN(true);
13Number.isNaN(null);
14Number.isNaN(37);
15Number.isNaN('37');
16Number.isNaN('37.37');
17Number.isNaN('');
18Number.isNaN(' ');

Today, I’m going to show you How do I check or handle NaN in react js, as above mentioned, I’m going to use the isNaN() method it will return false when the value is a number.

Let’s start today’s tutorial how do you check or handle NaN in react js?

React js check NaN example

Here, we will take the example of two states one state has some data and another has a NaN value, we will check both states consoles the NaN state name.

1import React, { useState, useEffect } from "react";
2export default function App() {
3 const [str1] = useState("Infinitbility");
4 const [str2] = useState(34);
5
6 useEffect(() => {
7 if (isNaN(str1)) {
8 console.log("str1 is not a number");
9 } else {
10 console.log("str1 is number");
11 }
12
13 if (isNaN(str2)) {
14 console.log("str2 is not a number");
15 } else {
16 console.log("str2 is number");
17 }
18 }, []);
19
20 return (
21 <div>
22 <p>{isNaN(str1) ? "str1 not a number" : "str1 is number"}</p>
23 <p>{isNaN(str2) ? "str2 not a number" : "str2 is number"}</p>
24 </div>
25 );
26}

In the above example, I have also put the example check NaN in render code here to check NaN we can use the ternary operator.

I hope it helps you, All the best 👍.

Follow me on Twitter

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo Photoshop Guide

Tutorials

Categories

More articles from Infinitbility

how to check nan in react native?

how to check nan in react native?

An example of check or handle nan in react native with the step-by-step guide.

August 7th, 2022 · 1 min read
how to check undefined in react native?

how to check undefined in react native?

An example of check or handle undefined in react native with the step-by-step guide.

August 6th, 2022 · 1 min read
© 2020–2022 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]