Why is this variable not considered to be 0 despite debugger saying otherwise?

Question

I'm writing a React component that takes a total number of reviews as a prop. When the number of reviews is 0, I want to render an element stating

<div>No reviews yet.</div>

Otherwise, I render elements containing review data. Here is the component and its context:

const Stats = ({good, neutral, bad, totalReviews}) => {
    if ({totalReviews} === 0) 
        return <div>No reviews yet.</div>
    else {
        return (
            <div>
                <Stat text="Total: " amount={totalReviews} />
            </div>
        );
    }
}

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

  let totalReviews = good + neutral + bad;

  return (
    <div>  
        <Stats totalReviews={totalReviews} />
    </div>
  )
}

I have used the debugger command to check in Chrome's developer console the values of each variable. It shows that totalReviews = 0. The variables good, neutral, and bad all also = 0.

I've also used console.log(totalReviews). 0 is displayed by the console.log. How come my program enters the second conditional as if totalReviews isn't 0?

Answer 1

if (totalReviews === 0)

You only wrap js statements in curly braces inside jsx, but your if statement is just regular js.