CODEWITHSUNDEEP
reactjsjsxincrementnan
Veljko Kukic
Veljko Kukic

Reputation: 137

Why I`m getting NaN ? Application seems to work but starting point is NaN. How can I solve this?

When I run this applicatio.n its working but instead of 0 or anything I get NaN as average and positive value. If I click on buttons I get exact values. App is working but I dont know how to remove this NaN when I start application all over again

import React, { useState } from 'react';
import { Table } from 'reactstrap';
import './App.css';


const App = () => {
  const [good, setGood] = useState(0)
  const [neutral, setNeutral] = useState(0)
  const [bad, setBad] = useState(0)

  const handleGood = () => {
   setGood(good + 1)
  }

  const handleNeutral = () => {
    setNeutral(neutral + 1)
   }

  const handleBad = () => {
   setBad(bad + 1)
  }

  const average =  (((good-bad)/(good + neutral + bad))*100).toFixed(1);
  const positive = ((good / (good + neutral + bad))*100).toFixed(1);

  if (average < 0) {
    alert('Your score is lower then 0')
  }
  return (
    <div className="container mt-5">
          <h1 className="text-center pb-2">Stankove ocene</h1>
      <Table bordered hover>
        <thead>
          <tr className="text-center">
            <th>#</th>
            <th><button className="btn btn-success" onClick={handleGood}>Good</button></th>
            <th> <button className="btn btn-primary" onClick={handleNeutral}>Neutral</button></th>
            <th><button className="btn btn-danger" onClick={handleBad}>Bad</button></th>
            <th><h5>Overall Feedback</h5></th>
            <th><h5>Average</h5></th>
            <th><h5>Positive</h5></th>
          </tr>
        </thead>
        <tbody>
          <tr className="text-center">
            <th scope="row">Feedback</th>
            <td><p>{good}</p></td>
            <td><p >{neutral}</p></td>
            <td><p>{bad}</p></td>
            <td><p>{good + neutral + bad}</p></td>
            <td><p>{average}%</p></td>
            <td><p>{positive}%</p></td>
          </tr>

        </tbody>
      </Table>


     </div>

  )
}


export default App;

I dont have any errors I just wont to get rid of NaN and to set value to zero. Still working on this app so i didnt made any component inside of a component yet so its a bit messy.

Thanks in forward.

Upvotes: 0

Views: 205

Answers (3)

Oleg Levin
Oleg Levin

Reputation: 3621

0/0 has no reasonable interpretation at all, hence its NaN.

Upvotes: 4

Clarity
Clarity

Reputation: 10873

The issue here is that during the initialisations all your state values are 0, so when you do (good-bad)/(good + neutral + bad) the first time, it evaluates to 0/0 and division by 0 returns NaN.

Also note that in case of counters like you have, if you need to increment the current state, it's better to use the functional form of setState since it will make sure to always get the latest value of the state:

const handleGood = () => {
  setGood(currentGood => currentGood + 1)
}

One way to fix this, would be to check if you're dividing by 0 methods and return 0 by default:

const formatValue = (val) => (val * 100).toFixed(1);

// Return array of values, where 1st item is average and second is positive
const getValues = () => {
  const divider = good + neutral + bad;
  if (divider === 0) {
    return ['0', '0'];
  }

  return [formatValue((good - bad) / divider), formatValue(good / divider)]
}

Usage, with array destructuring :

const [avg, positive] = getValues();

Upvotes: 2

Hbarna
Hbarna

Reputation: 435

I think this may be because you are trying to divide by 0. If you change one of your values of good, bad or neutral to 1, it starts showing numbers.

Upvotes: 0

Related Questions