{"id":27647,"date":"2022-12-25T15:27:42","date_gmt":"2022-12-25T09:57:42","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-calculating-monthly-salary-returned-nan-in-react-closed\/"},"modified":"2022-12-25T15:27:42","modified_gmt":"2022-12-25T09:57:42","slug":"solved-calculating-monthly-salary-returned-nan-in-react-closed","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-calculating-monthly-salary-returned-nan-in-react-closed\/","title":{"rendered":"[Solved] Calculating monthly salary returned NaN in React [closed]"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

There seems to be one of the reason why you are getting NaN is because you have not initialized netSalary, grossSalary and other variables and as a result they are undefined and when you do something like undefined + 1 => you get NaN.<\/p>\n

But why are they undefined?
\nYou might think in your function you updated the state variables before using them, but they are not updated instantaneously not synchronously, so after you have written setTaxRates() and if you try to use the state variables at that moment the state variable have not really updated it’s value, so you will end up using old value, which will be undefined in this case.<\/p>\n

Solution?
\nFirst initialize the state variables with some default data.
\nthen in your funciton make sure you do not use state variables just after updating them<\/p>\n

so your updated code will look something like this.<\/p>\n

const salary()=>{\n   const [grossSalary,setGross] = useState(0);\n   const [taxRate, setTax] =useState(0);\n   const [pension, setPension] = useState(0);\n   const [netSalary, setNet] = useState(0)\n   const calSal =()=>{\n     if(grossSalary > 600 && grossSalary<1651){\n       let taxR = (grossSalary*0.1)-60;\n       let penS= grossSalary*0.7\n       netSal = grossSalary-taxR-pension;\n       \/\/ now update all the states as required\n       setTaxRate(taxR);\n       setPension(penS);\n       setNetSalary(netSal);\n     }else{ \n       .......\n      }\n       .............\n   }\n }\n<\/code><\/pre>\n<\/p><\/div>\n
<\/div>\n<\/div>\n
            2<\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved Calculating monthly salary returned NaN in React [closed] <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] There seems to be one of the reason why you are getting NaN is because you have not initialized netSalary, grossSalary and other variables and as a result they are undefined and when you do something like undefined + 1 => you get NaN. But why are they undefined? You might think in your … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[784],"class_list":["post-27647","post","type-post","status-publish","format-standard","hentry","category-solved","tag-reactjs"],"yoast_head":"\n[Solved] Calculating monthly salary returned NaN in React [closed] - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-calculating-monthly-salary-returned-nan-in-react-closed\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Calculating monthly salary returned NaN in React [closed] - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] There seems to be one of the reason why you are getting NaN is because you have not initialized netSalary, grossSalary and other variables and as a result they are undefined and when you do something like undefined + 1 => you get NaN. But why are they undefined? You might think in your ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-calculating-monthly-salary-returned-nan-in-react-closed\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-12-25T09:57:42+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-calculating-monthly-salary-returned-nan-in-react-closed\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-calculating-monthly-salary-returned-nan-in-react-closed\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Calculating monthly salary returned NaN in React [closed]\",\"datePublished\":\"2022-12-25T09:57:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-calculating-monthly-salary-returned-nan-in-react-closed\/\"},\"wordCount\":167,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"reactjs\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-calculating-monthly-salary-returned-nan-in-react-closed\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-calculating-monthly-salary-returned-nan-in-react-closed\/\",\"name\":\"[Solved] Calculating monthly salary returned NaN in React [closed] - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-12-25T09:57:42+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-calculating-monthly-salary-returned-nan-in-react-closed\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-calculating-monthly-salary-returned-nan-in-react-closed\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-calculating-monthly-salary-returned-nan-in-react-closed\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Calculating monthly salary returned NaN in React [closed]\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] Calculating monthly salary returned NaN in React [closed] - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-calculating-monthly-salary-returned-nan-in-react-closed\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Calculating monthly salary returned NaN in React [closed] - JassWeb","og_description":"[ad_1] There seems to be one of the reason why you are getting NaN is because you have not initialized netSalary, grossSalary and other variables and as a result they are undefined and when you do something like undefined + 1 => you get NaN. But why are they undefined? You might think in your ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-calculating-monthly-salary-returned-nan-in-react-closed\/","og_site_name":"JassWeb","article_published_time":"2022-12-25T09:57:42+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-calculating-monthly-salary-returned-nan-in-react-closed\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-calculating-monthly-salary-returned-nan-in-react-closed\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Calculating monthly salary returned NaN in React [closed]","datePublished":"2022-12-25T09:57:42+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-calculating-monthly-salary-returned-nan-in-react-closed\/"},"wordCount":167,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["reactjs"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-calculating-monthly-salary-returned-nan-in-react-closed\/","url":"https:\/\/jassweb.com\/solved\/solved-calculating-monthly-salary-returned-nan-in-react-closed\/","name":"[Solved] Calculating monthly salary returned NaN in React [closed] - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-12-25T09:57:42+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-calculating-monthly-salary-returned-nan-in-react-closed\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-calculating-monthly-salary-returned-nan-in-react-closed\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-calculating-monthly-salary-returned-nan-in-react-closed\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Calculating monthly salary returned NaN in React [closed]"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/27647","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=27647"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/27647\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=27647"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=27647"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=27647"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}